/* ============================================================
   Boxes Trading — Design Enhancement Layer
   Non modifica la struttura: eleva la percezione di lusso.
   Palette invariata (oro #D4AF37, crimson, sfondo #090502).
   ============================================================ */

:root{
  /* Oro materiale: gradiente metallico invece di tinta piatta */
  --gold-metal: linear-gradient(135deg, #F7E5A9 0%, #D4AF37 38%, #A87B2C 62%, #EDD393 100%);
  --gold-metal-soft: linear-gradient(135deg, #E9CE82 0%, #C79A34 100%);
}

/* ---- 1. (texture di sfondo del body RIMOSSA — disturbava l'hero) ---- */

/* ---- 2. ORO MATERIALE su prezzi, numeri, badge ---- */
.product-price,
.pd-price,
.show-card .sc-price,
.view-all-card .va-num,
.bsp-price,
.stat-num,
.count-num{
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-primary); /* fallback */
}

/* Badge/tag prodotto: fondo oro metallico, testo scuro (più premium del piatto) */
.product-tag{
  background: var(--gold-metal);
  color: #2a1c06;
  font-weight: 600;
  box-shadow: 0 4px 14px -4px var(--gold-glow);
  border: none;
}

/* ---- 3. MICRO-INTERAZIONE SCHEDA PRODOTTO ----
   Sheen di luce che attraversa l'immagine all'hover: evoca il riflesso
   della madreperla. Su mobile si attiva al tap (:active). */
.product-card .product-img-wrapper::after,
.product-card .home-product-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 30%, rgba(247,229,169,0.18) 47%, rgba(255,255,255,0.28) 50%, rgba(247,229,169,0.18) 53%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s cubic-bezier(0.22,0.8,0.3,1);
  pointer-events:none; z-index:3;
  mix-blend-mode: screen;
}
.product-card:hover .product-img-wrapper::after,
.product-card:hover .home-product-media::after,
.product-card:active .product-img-wrapper::after,
.product-card:active .home-product-media::after{
  transform: translateX(120%);
}
html[dir="rtl"] .product-card .product-img-wrapper::after,
html[dir="rtl"] .product-card .home-product-media::after{
  background: linear-gradient(245deg, transparent 30%, rgba(247,229,169,0.18) 47%, rgba(255,255,255,0.28) 50%, rgba(247,229,169,0.18) 53%, transparent 70%);
}
.product-img-wrapper, .home-product-media{ position:relative; overflow:hidden; }

/* Bordo che si accende in oro all'hover */
.product-card{ transition: var(--transition), border-color 0.4s ease; }
.product-card:hover{ border-color: var(--border-gold-bright); box-shadow: var(--shadow-luxury), 0 0 0 1px var(--gold-glow); }

/* ---- 4. DIVISORE GEOMETRICO KHATAM tra sezioni ---- */
.khatam-divider{
  display:flex; align-items:center; justify-content:center;
  gap:18px; margin:0 auto; padding:38px 0; max-width:340px;
  opacity:.8;
}
.khatam-divider::before,
.khatam-divider::after{
  content:""; height:1px; flex:1;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.khatam-divider svg{ width:26px; height:26px; flex:none; color:var(--gold-primary); }

/* ---- 5. CTA ORO con profondità metallica ---- */
.btn-gold{
  background: var(--gold-metal) !important;
  color:#2a1c06 !important;
  font-weight:600;
  border:none;
  box-shadow: 0 8px 24px -8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-gold:hover{
  box-shadow: 0 12px 30px -8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

/* ---- 6. BLUR-UP: immagini che si mettono a fuoco al caricamento ---- */
img[data-blur]{
  filter: blur(14px);
  transform: scale(1.03);
  transition: filter 0.7s ease, transform 0.7s ease;
}
img[data-blur].loaded{
  filter: blur(0);
  transform: scale(1);
}

/* ---- 7. STICKY WHATSAPP FLOTTANTE ---- */
.wa-float{
  position:fixed; z-index:900;
  inset-inline-end:20px; inset-block-end:20px;
  width:58px; height:58px; border-radius:50%;
  background:#25D366;
  display:grid; place-items:center;
  box-shadow:0 10px 30px -6px rgba(37,211,102,0.5), 0 4px 12px rgba(0,0,0,0.4);
  transition: transform .3s cubic-bezier(0.22,0.8,0.3,1), box-shadow .3s ease;
  animation: wa-in .5s .8s both;
}
.wa-float:hover{ transform:scale(1.08); box-shadow:0 14px 36px -6px rgba(37,211,102,0.6); }
.wa-float svg{ width:32px; height:32px; color:#fff; }
@keyframes wa-in{ from{opacity:0; transform:scale(.4) translateY(20px)} to{opacity:1; transform:scale(1) translateY(0)} }
@media (max-width:640px){ .wa-float{ width:54px; height:54px; inset-inline-end:16px; inset-block-end:16px; } }

/* ---- 8. SCARCITY BADGE "pezzo unico" (opt-in via classe) ---- */
.unique-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; color:var(--text-gold);
  border:1px solid var(--border-gold);
  padding:3px 9px; border-radius:2px;
  letter-spacing:.02em;
}
.unique-badge::before{ content:"✦"; color:var(--gold-primary); font-size:.7em; }

/* ---- Accessibilità: rispetta reduced-motion ---- */
@media (prefers-reduced-motion: reduce){
  .product-card .product-img-wrapper::after,
  .product-card .home-product-media::after{ transition:none; display:none; }
  img[data-blur]{ filter:none; transform:none; }
  .wa-float{ animation:none; }
  body{ background-attachment: scroll; }
}

/* ============================================================
   Empty state carrello — invito ad agire, non vicolo cieco
   ============================================================ */
.cart-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:16px; padding:56px 24px; color:var(--text-muted);
}
.cart-empty svg{ width:52px; height:52px; color:var(--gold-deep); opacity:.7; }
.cart-empty p{ margin:0; font-size:.98rem; line-height:1.6; max-width:26ch; }
.cart-empty-cta{
  margin-top:6px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold-metal); color:#2a1c06; font-weight:600;
  padding:12px 26px; border-radius:4px; border:none; cursor:pointer;
  text-decoration:none; font-size:.95rem;
  box-shadow:0 8px 24px -8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .3s cubic-bezier(0.22,0.8,0.3,1), box-shadow .3s ease;
}
.cart-empty-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.5); }

/* ============================================================
   Skeleton loading — percezione di velocità durante il render
   ============================================================ */
.skeleton-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; }
.skel-card{
  border:1px solid var(--border-gold); background:var(--bg-card);
  overflow:hidden; border-radius:2px;
}
.skel-img{ aspect-ratio:1/1; width:100%; }
.skel-line{ height:14px; margin:14px 16px; border-radius:3px; }
.skel-line.short{ width:45%; }
.skel-line.mid{ width:70%; }
.skel-img, .skel-line{
  background:linear-gradient(100deg, rgba(212,175,55,0.04) 30%, rgba(212,175,55,0.14) 50%, rgba(212,175,55,0.04) 70%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce){
  .skel-img, .skel-line{ animation:none; }
  .cart-empty-cta{ transition:none; }
}

/* ============================================================
   Pagina 404 — vicolo che riporta dentro, non fuori
   ============================================================ */
.nf-section{
  min-height:72vh; display:flex; align-items:center; justify-content:center;
  padding:80px 24px; text-align:center;
}
.nf-wrap{ max-width:560px; }
.nf-mark{ color:var(--gold-primary); opacity:.5; margin-bottom:18px; }
.nf-mark svg{ width:44px; height:44px; }
.nf-code{
  font-family:'Marcellus',serif; font-size:clamp(4.5rem,14vw,8rem); line-height:.9;
  background:var(--gold-metal); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold-primary);
  margin-bottom:10px; letter-spacing:.04em;
}
.nf-section h1{
  font-family:'Amiri','Marcellus',serif; font-size:clamp(1.6rem,3.4vw,2.4rem);
  color:var(--text-main); margin-bottom:14px;
}
.nf-section p{ color:var(--text-muted); line-height:1.9; max-width:46ch; margin:0 auto 32px; }
.nf-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width:520px){
  .nf-actions{ flex-direction:column; }
  .nf-actions .btn-gold, .nf-actions .btn-outline{ width:100%; justify-content:center; }
}

/* ============================================================
   FIX hero-features su desktop — icone e testi centrati e allineati
   (l'allineamento esisteva solo nelle media query mobile)
   ============================================================ */
.hero-features .feature-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:2px;
}
.hero-features .feature-item .icon-svg-lg{
  margin:0 auto 10px;
  display:block;
}
.hero-features .feature-item strong{ text-align:center; }
.hero-features .feature-item span{ text-align:center; line-height:1.5; }

/* ============================================================
   SHOP / OUR COLLECTION — redesign
   ============================================================ */
.shop-intro{
  text-align:center; padding:70px 24px 34px;
  border-bottom:1px solid var(--border-gold);
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(212,175,55,.12), transparent 55%),
    linear-gradient(180deg, rgba(24,15,6,.4), transparent);
}
.shop-intro::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:60px; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='14' y='14' width='12' height='12' transform='rotate(45 20 20)' fill='none' stroke='%23D4AF37' stroke-width='0.7' stroke-opacity='0.08'/%3E%3C/svg%3E");
  pointer-events:none;
}
.shop-intro > *{ position:relative; z-index:1; }
.shop-intro .breadcrumb{ justify-content:center; margin-bottom:20px; }
.shop-intro-title{ font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:14px; line-height:1.15; }
.shop-intro-sub{ color:var(--text-muted); max-width:58ch; margin:0 auto; line-height:1.9; font-size:1.02rem; }

.shop-body{ padding-top:36px; }
.shop-controls{ display:flex; flex-direction:column; gap:20px; margin-bottom:26px; }

/* Pills categoria eleganti con contatore */
.cat-pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cat-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; cursor:pointer;
  background:transparent; color:var(--text-muted);
  border:1px solid var(--border-gold); border-radius:100px;
  font-size:.92rem; font-family:var(--font-ar-title),serif;
  transition:all .35s cubic-bezier(0.22,0.8,0.3,1);
  letter-spacing:.01em;
}
.cat-pill:hover{ border-color:var(--border-gold-bright); color:var(--gold-light); transform:translateY(-1px); }
.cat-pill .cat-pill-n{
  font-size:.72rem; min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(212,175,55,.12); color:var(--gold-light);
  border-radius:100px; font-weight:600; font-family:'Marcellus',serif;
  transition:all .35s ease;
}
.cat-pill.active{
  background:var(--gold-metal); color:#2a1c06; border-color:transparent;
  box-shadow:0 8px 22px -8px var(--gold-glow); font-weight:600;
}
.cat-pill.active .cat-pill-n{ background:rgba(42,28,6,.18); color:#2a1c06; }

.shop-controls-row{
  display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.shop-controls-row .search-box{ min-width:min(340px,80vw); }

/* Riga risultati */
.shop-resultline{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; margin-bottom:24px;
  border-top:1px solid var(--border-gold-faint,rgba(212,175,55,.12));
  border-bottom:1px solid var(--border-gold-faint,rgba(212,175,55,.12));
}
.shop-resultline-txt{ color:var(--text-muted); font-size:.9rem; }
.shop-resultline-txt b{ color:var(--gold-light); font-family:'Marcellus',serif; font-size:1.05rem; }
.shop-resultline-cat{
  color:var(--gold-light); font-size:.95rem; font-family:var(--font-ar-title),serif;
  letter-spacing:.02em;
}

@media (max-width:640px){
  .shop-intro{ padding:44px 18px 24px; }
  .cat-pills{ gap:8px; }
  .cat-pill{ padding:9px 15px; font-size:.85rem; }
  .shop-controls-row{ flex-direction:column; }
  .shop-controls-row .search-box, .shop-controls-row .sort-select{ width:100%; }
}

/* ============================================================
   CONTACTS — redesign completo
   ============================================================ */
.ct-hero{
  position:relative; padding:90px 24px 70px; text-align:center; overflow:hidden;
  border-bottom:1px solid var(--border-gold);
}
.ct-hero-bg{ position:absolute; inset:0; z-index:0; }
.ct-hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.ct-hero-overlay{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(9,5,2,.7), rgba(9,5,2,.9)); }
.ct-hero .container{ position:relative; z-index:2; }
.ct-hero .breadcrumb{ justify-content:center; margin-bottom:18px; }
.ct-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:12px; }
.ct-hero p{ color:var(--text-muted); max-width:52ch; margin:0 auto; line-height:1.85; }

.ct-body{ padding:56px 0; }
.ct-layout{
  display:grid; grid-template-columns:1fr 1.1fr; gap:32px;
  max-width:1000px; margin:0 auto 60px;
}

/* Canali — righe eleganti */
.ct-channels{ display:flex; flex-direction:column; gap:12px; }
.ct-line{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px; text-decoration:none;
  background:var(--bg-card,rgba(24,15,6,.5)); border:1px solid var(--border-gold);
  border-radius:12px; transition:all .35s cubic-bezier(0.22,0.8,0.3,1);
}
.ct-line:hover{ border-color:var(--border-gold-bright); transform:translateY(-2px);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
.ct-line-ic{
  flex:0 0 46px; width:46px; height:46px; display:grid; place-items:center;
  border-radius:10px; background:rgba(212,175,55,.1); color:var(--gold-primary);
}
.ct-line-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.ct-line-txt{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.ct-line-txt b{ color:var(--gold-light); font-size:1.02rem; font-family:var(--font-ar-title),serif; }
.ct-line-txt small{ color:var(--text-muted); font-size:.86rem; }
.ct-line-arrow{ color:var(--gold-deep); opacity:.5; transition:all .35s ease; flex:0 0 auto; }
.ct-line-arrow svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.ct-line:hover .ct-line-arrow{ opacity:1; transform:translateX(-4px); }
html[dir="ltr"] .ct-line:hover .ct-line-arrow{ transform:translateX(4px) rotate(180deg); }
html[dir="ltr"] .ct-line-arrow{ transform:rotate(180deg); }
.ct-line-primary{ background:linear-gradient(135deg, rgba(37,211,102,.1), rgba(24,15,6,.5)); border-color:rgba(37,211,102,.3); }
.ct-line-primary .ct-line-ic{ background:rgba(37,211,102,.15); color:#25D366; }

.ct-hours{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  padding:14px 20px; color:var(--text-muted); font-size:.88rem;
}
.ct-hours-dot{ width:8px; height:8px; border-radius:50%; background:#25D366;
  box-shadow:0 0 0 3px rgba(37,211,102,.2); flex:0 0 auto; animation:ct-pulse 2s infinite; }
@keyframes ct-pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* Blocco richiesta rapida */
.ct-quick{
  background:var(--bg-card,rgba(24,15,6,.55)); border:1px solid var(--border-gold);
  border-radius:14px; padding:32px; display:flex; flex-direction:column; gap:16px;
}
.ct-quick-head h2{ font-size:1.5rem; color:var(--gold-light); margin-bottom:8px; }
.ct-quick-head p{ color:var(--text-muted); font-size:.92rem; line-height:1.7; margin:0; }
.ct-field{ display:flex; flex-direction:column; gap:7px; }
.ct-field span{ color:var(--text-main); font-size:.86rem; font-weight:500; }
.ct-field input, .ct-field textarea{
  width:100%; padding:13px 16px; box-sizing:border-box;
  background:rgba(9,5,2,.6); border:1px solid var(--border-gold); border-radius:8px;
  color:var(--text-main); font-size:.95rem; font-family:inherit; outline:none;
  transition:border-color .3s ease;
}
.ct-field input:focus, .ct-field textarea:focus{ border-color:var(--gold-primary); }
.ct-field textarea{ resize:vertical; min-height:90px; line-height:1.6; }
.ct-quick-send{ margin-top:6px; justify-content:center; width:100%; }
.ct-quick-note{ color:var(--text-muted); font-size:.8rem; text-align:center; }

@media (max-width:820px){
  .ct-layout{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px){
  .ct-hero{ padding:60px 18px 44px; }
  .ct-quick{ padding:24px; }
}

/* ============================================================
   HEADER — sempre una riga pulita, MAI a capo a nessuna risoluzione
   ============================================================ */
.nav-content{
  flex-wrap:nowrap !important;
  gap:clamp(12px,1.5vw,24px) !important;
}
.brand-logo{ flex:0 0 auto; min-width:0; }
.brand-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-title small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* nav-links: mai a capo, resta su una riga */
.nav-links{
  flex-wrap:nowrap !important;
  white-space:nowrap;
  gap:clamp(12px,1.6vw,26px) !important;
}
.nav-links a{ white-space:nowrap; flex:0 0 auto; }
.nav-actions{ flex:0 0 auto; white-space:nowrap; }

/* Il menu completo scompare PRIMA che lo spazio finisca (evita il wrap 900-1100px).
   Sotto i 1100px passa al burger: header = logo + azioni + burger, una riga. */
@media(max-width:1100px){
  .nav-links{ display:none !important; }
  .nav-burger{ display:grid !important; }
}
/* Su schermi medi/piccoli il sottotitolo del brand si nasconde per non stringere */
@media(max-width:1100px){
  .brand-title small{ display:none; }
}
@media(max-width:480px){
  .brand-title{ font-size:1.05rem; max-width:46vw; }
  .brand-logo img{ height:38px; }
}
/* Micro-schermi: riduce ancora per tenere tutto in riga */
@media(max-width:360px){
  .brand-title{ max-width:38vw; font-size:.95rem; }
  .nav-actions .lang-btn span{ display:none; }
}

/* Brand subtitle: firma discreta, non secondo titolo che compete col nome */
.brand-title small{
  font-size:.68rem !important;
  letter-spacing:.08em;
  opacity:.75;
  text-transform:uppercase;
  font-weight:400;
  margin-top:2px;
}

/* ============================================================
   DIVISORE A TESSERE MOSAICO — quadratini colorati (roba bella)
   Richiama le tessere del mosaico damasceno
   ============================================================ */
.mosaic-divider{
  display:flex; align-items:center; justify-content:center;
  gap:0; margin:0 auto; padding:44px 0; max-width:420px;
}
.mosaic-divider::before,
.mosaic-divider::after{
  content:""; height:1px; flex:1; max-width:120px;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
}
.mosaic-tiles{ display:flex; gap:6px; padding:0 20px; }
.mosaic-tiles i{
  width:11px; height:11px; display:block; transform:rotate(45deg);
  border-radius:1px;
}
.mosaic-tiles i:nth-child(1){ background:#C1121F; }              /* rosso corniola */
.mosaic-tiles i:nth-child(2){ background:var(--gold-primary); }  /* oro */
.mosaic-tiles i:nth-child(3){ background:#0F6E56; }              /* verde smeraldo */
.mosaic-tiles i:nth-child(4){ background:#E7E4DC; }              /* madreperla */
.mosaic-tiles i:nth-child(5){ background:var(--gold-primary); }  /* oro */
.mosaic-tiles i:nth-child(6){ background:#7B3F00; }              /* noce */
.mosaic-tiles i:nth-child(7){ background:#C1121F; }              /* rosso */
@media (prefers-reduced-motion: no-preference){
  .mosaic-tiles i{ animation:mos-fade .6s ease both; }
  .mosaic-tiles i:nth-child(1){animation-delay:.05s}
  .mosaic-tiles i:nth-child(2){animation-delay:.1s}
  .mosaic-tiles i:nth-child(3){animation-delay:.15s}
  .mosaic-tiles i:nth-child(4){animation-delay:.2s}
  .mosaic-tiles i:nth-child(5){animation-delay:.25s}
  .mosaic-tiles i:nth-child(6){animation-delay:.3s}
  .mosaic-tiles i:nth-child(7){animation-delay:.35s}
}
@keyframes mos-fade{ from{opacity:0;transform:rotate(45deg) scale(.4)} to{opacity:1;transform:rotate(45deg) scale(1)} }
/* Rimuovo il pulsante torna-su (in conflitto col WhatsApp flottante) */
.back-top{ display:none !important; }

/* Footer bottom: copyright e tagline su una riga pulita, no wrap disordinato */
.footer-bottom{
  flex-wrap:nowrap !important;
  align-items:center;
  gap:20px !important;
}
@media(max-width:680px){
  .footer-bottom{ flex-direction:column !important; text-align:center; gap:10px !important; }
}