/** Shopify CDN: Minification failed

Line 35:0 All "@import" rules must come first

**/
/* ============================================================
   OSPITO KIT — Premium Theme Override
   Da aggiungere in: Admin Shopify > Temi > Modifica codice
   File: assets/ospito-kit-premium.css
   Poi includi in layout/theme.liquid con:
   <link rel="stylesheet" href="{{ 'ospito-kit-premium.css' | asset_url }}">
   ============================================================ */

/* --- TOKEN DI BRAND --- */
:root {
  --ok-terracotta:     #C4714A;
  --ok-terracotta-dark:#A05A38;
  --ok-terracotta-light:#EDCFBE;
  --ok-panna:          #FAF7F2;
  --ok-salvia:         #8A9E7E;
  --ok-salvia-light:   #D4DECE;
  --ok-antracite:      #2C2C2C;
  --ok-antracite-soft: #4A4A4A;

  /* Font Ospito Kit */
  --ok-font-display:   'Cormorant Garamond', Georgia, serif;
  --ok-font-body:      'DM Sans', system-ui, sans-serif;

  /* Easing */
  --ok-ease:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ok-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- FONT GOOGLE --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ============================================================
   BACKGROUND & BODY
   ============================================================ */
body {
  background-color: var(--ok-panna) !important;
  font-family: var(--ok-font-body);
  color: var(--ok-antracite);
}

/* ============================================================
   TIPOGRAFIA — TITOLI
   ============================================================ */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--ok-font-display) !important;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ok-antracite);
}

h1, .h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.08; }
h2, .h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.14; }
h3, .h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.22; }

/* ============================================================
   BARRA PROMOZIONE — Banner sopra l'header
   ============================================================ */
.ok-promo-bar {
  background: var(--ok-terracotta);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-family: var(--ok-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
}

.ok-promo-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 60px
  );
  pointer-events: none;
}

/* ============================================================
   HEADER — vetro opaco con bordo salvia sottile
   ============================================================ */
header,
header-component,
.header {
  background: rgba(250,247,242,0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(138,158,126,0.25) !important;
  transition: background 0.4s var(--ok-ease), border-color 0.4s var(--ok-ease);
}

/* ============================================================
   PULSANTI PRIMARY — terracotta
   ============================================================ */
.button:not(.button-secondary):not(.button-unstyled),
button.shopify-payment-button__button--unbranded {
  background-color: var(--ok-terracotta) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 2px !important;
  font-family: var(--ok-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  padding: 14px 32px !important;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.3s var(--ok-ease),
    transform 0.2s var(--ok-ease),
    box-shadow 0.3s var(--ok-ease) !important;
}

.button:not(.button-secondary):not(.button-unstyled)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.3s var(--ok-ease);
}

.button:not(.button-secondary):not(.button-unstyled):hover {
  background-color: var(--ok-terracotta-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196,113,74,0.35) !important;
}

.button:not(.button-secondary):not(.button-unstyled):active {
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(196,113,74,0.25) !important;
}

/* ============================================================
   PULSANTI SECONDARY — bordo terracotta
   ============================================================ */
.button-secondary {
  background-color: transparent !important;
  color: var(--ok-terracotta) !important;
  border: 1.5px solid var(--ok-terracotta) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
  font-family: var(--ok-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  transition:
    background-color 0.3s var(--ok-ease),
    color 0.3s var(--ok-ease),
    transform 0.2s var(--ok-ease) !important;
}

.button-secondary:hover {
  background-color: var(--ok-terracotta) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* ============================================================
   PRODUCT CARD — hover raffinato
   ============================================================ */
.product-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  transition:
    transform 0.4s var(--ok-ease),
    box-shadow 0.4s var(--ok-ease) !important;
}

.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(44,44,44,0.10) !important;
}

.product-card__image img {
  transition: transform 0.6s var(--ok-ease) !important;
}

.product-card:hover .product-card__image img {
  transform: scale(1.04) !important;
}

/* ============================================================
   PREZZO — terracotta per il prezzo scontato
   ============================================================ */
.price--on-sale .price-item--sale,
.price-item--sale {
  color: var(--ok-terracotta) !important;
  font-weight: 600 !important;
}

.compare-at-price {
  color: var(--ok-antracite-soft) !important;
  opacity: 0.45 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
}

/* ============================================================
   SEZIONI — separatore elegante
   ============================================================ */
.shopify-section + .shopify-section {
  border-top: 1px solid rgba(138,158,126,0.18);
}

/* ============================================================
   LINK — animazione underline terracotta
   ============================================================ */
a:not(.button):not(.button-secondary):not(.product-card__link) {
  position: relative;
  text-decoration: none;
  color: inherit;
}

a:not(.button):not(.button-secondary):not(.product-card__link)::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ok-terracotta);
  transition: width 0.3s var(--ok-ease);
}

a:not(.button):not(.button-secondary):not(.product-card__link):hover::after {
  width: 100%;
}

/* ============================================================
   INPUT & FORM FIELDS
   ============================================================ */
input:not([type='checkbox']):not([type='radio']):not([type='submit']),
textarea,
select {
  border: 1px solid rgba(44,44,44,0.18) !important;
  border-radius: 2px !important;
  background: #fff !important;
  font-family: var(--ok-font-body) !important;
  color: var(--ok-antracite) !important;
  transition: border-color 0.25s var(--ok-ease), box-shadow 0.25s var(--ok-ease) !important;
}

input:not([type='checkbox']):not([type='radio']):not([type='submit']):focus,
textarea:focus {
  border-color: var(--ok-terracotta) !important;
  box-shadow: 0 0 0 3px rgba(196,113,74,0.12) !important;
  outline: none !important;
}

/* ============================================================
   SCROLL REVEAL — classi da usare nelle sezioni Shopify
   ============================================================ */
.ok-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ok-ease),
    transform 0.7s var(--ok-ease);
}

.ok-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ok-reveal-delay-1 { transition-delay: 0.1s; }
.ok-reveal-delay-2 { transition-delay: 0.2s; }
.ok-reveal-delay-3 { transition-delay: 0.3s; }
.ok-reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   BADGE "KIT COMPLETO" — etichetta premium
   ============================================================ */
.ok-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ok-salvia-light);
  color: var(--ok-antracite);
  font-family: var(--ok-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
}

.ok-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok-salvia);
}

/* ============================================================
   DIVIDER DECORATIVO — linea con foglia salvia
   ============================================================ */
.ok-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
  color: var(--ok-salvia);
}

.ok-divider::before,
.ok-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ok-salvia-light), transparent);
}

/* ============================================================
   FOOTER — caldo e leggero
   ============================================================ */
footer {
  background: var(--ok-antracite) !important;
  color: rgba(250,247,242,0.75) !important;
}

footer a {
  color: rgba(250,247,242,0.6) !important;
}

footer a:hover {
  color: var(--ok-terracotta-light) !important;
}

/* ============================================================
   SCROLLBAR CUSTOM — terracotta sottile
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ok-panna); }
::-webkit-scrollbar-thumb {
  background: var(--ok-terracotta-light);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ok-terracotta); }

/* ============================================================
   STICKY ADD TO CART — barra mobile raffinata
   ============================================================ */
.ok-sticky-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(250,247,242,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(138,158,126,0.2);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.4s var(--ok-ease);
}

.ok-sticky-cart.is-visible {
  transform: translateY(0);
}

/* ============================================================
   ANIMAZIONE SHIMMER — per sezioni skeleton
   ============================================================ */
@keyframes ok-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.ok-shimmer {
  background: linear-gradient(
    90deg,
    var(--ok-panna) 25%,
    var(--ok-terracotta-light) 50%,
    var(--ok-panna) 75%
  );
  background-size: 400px 100%;
  animation: ok-shimmer 1.6s infinite linear;
}

/* ============================================================
   SELEZIONE TESTO — colore brand
   ============================================================ */
::selection {
  background: var(--ok-terracotta-light);
  color: var(--ok-antracite);
}

/* ============================================================
   SCRIPT INLINE: IntersectionObserver per .ok-reveal
   Aggiungilo in theme.liquid prima di </body>
   ============================================================ */

/*
<script>
(function() {
  var els = document.querySelectorAll('.ok-reveal');
  if (!els.length) return;
  var io = new IntersectionObserver(function(entries) {
    entries.forEach(function(e) {
      if (e.isIntersecting) {
        e.target.classList.add('is-visible');
        io.unobserve(e.target);
      }
    });
  }, { threshold: 0.12 });
  els.forEach(function(el) { io.observe(el); });
})();
</script>
*/

/* ============================================================
   HEADER — padding ridotto
   ============================================================ */
.header .header__columns {
  --padding-block-start: 6px !important;
  --padding-block-end: 6px !important;
}