/* ═══════════════════════════════════════════════════════════════════════════
   Soûl Niya Boutique v2.0.1 — frontend stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --snb-gold:             #c9a96e;
  --snb-gold-dark:        #b8944f;
  --snb-dark:             #1a1a1a;
  --snb-bg:               #faf9f7;
  --snb-btn-module-bg:    #c9a96e;
  --snb-btn-text:         #ffffff;
  --snb-font-serif:       'Cormorant Garamond', Georgia, serif;
  --snb-font-sans:        'Jost', system-ui, sans-serif;
  --snb-font-size-base:   16px;
  --snb-font-size-title:  28px;
  --snb-font-size-card:   22px;
  --snb-cream:            #faf9f7;
  --snb-border:           #e8dcc8;
  --snb-border-light:     #f0e8d8;
  --snb-stone:            #78716c;
  --snb-stone-light:      #a8a29e;
  --snb-radius:           2px;
  --snb-shadow-sm:        0 2px 8px rgba(0,0,0,.06);
  --snb-shadow-lg:        0 16px 48px rgba(0,0,0,.14);
  --snb-tr:               .24s ease;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.snb-boutique {
  font-family: var(--snb-font-sans);
  font-size: var(--snb-font-size-base);
  color: var(--snb-dark);
  width: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.snb-boutique *, .snb-boutique *::before, .snb-boutique *::after { box-sizing: border-box; }
.snb-hidden { display: none !important; }

/* ── Filters ──────────────────────────────────────────────────────────────── */
.snb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 32px; }
.snb-cats { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.snb-cat-btn {
  padding: 9px 18px;
  font-family: var(--snb-font-sans); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  background: transparent; color: var(--snb-stone);
  border: 1px solid var(--snb-border); border-radius: var(--snb-radius);
  cursor: pointer; line-height: 1;
  transition: border-color var(--snb-tr), color var(--snb-tr), background var(--snb-tr);
}
.snb-cat-btn--active, .snb-cat-btn:hover { border-color: var(--snb-dark); background: var(--snb-dark); color: #fff; }
.snb-sort { display: inline-flex; align-items: center; gap: 7px; color: var(--snb-stone-light); }
.snb-sort-select {
  font-family: var(--snb-font-sans); font-size: 12px;
  border: 1px solid var(--snb-border); border-radius: var(--snb-radius);
  padding: 9px 12px; background: #fff; color: var(--snb-dark);
  cursor: pointer; outline: none;
  transition: border-color var(--snb-tr);
}
.snb-sort-select:focus { border-color: var(--snb-gold); }
.snb-count { text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--snb-stone-light); margin-top: 32px; }

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.snb-grid { display: grid; gap: 24px; width: 100%; }
.snb-cols-2 .snb-grid { grid-template-columns: repeat(2, 1fr); }
.snb-cols-3 .snb-grid { grid-template-columns: repeat(3, 1fr); }
.snb-cols-4 .snb-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .snb-cols-4 .snb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .snb-cols-3 .snb-grid, .snb-cols-4 .snb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .snb-cols-2 .snb-grid, .snb-cols-3 .snb-grid, .snb-cols-4 .snb-grid { grid-template-columns: 1fr; } .snb-filters { flex-direction: column; align-items: stretch; } }
.snb-empty { text-align: center; padding: 72px 20px; color: var(--snb-stone-light); font-family: var(--snb-font-serif); font-size: 26px; font-weight: 300; }

/* ══════════════════════════════════════════════════════════════════════════ */
/* CARD                                                                       */
/* ══════════════════════════════════════════════════════════════════════════ */
.snb-card {
  background: #fff; border: 1px solid #f0ebe3; border-radius: var(--snb-radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--snb-shadow-sm);
  transition: box-shadow var(--snb-tr), transform var(--snb-tr);
}
.snb-card:hover { box-shadow: var(--snb-shadow-lg); transform: translateY(-3px); }

.snb-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; }
.snb-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; display: block; }
.snb-card:hover .snb-card__thumb img { transform: scale(1.06); }

.snb-card__overlay {
  position: absolute; inset: 0; background: rgba(13,13,13,.3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--snb-tr);
}
.snb-card:hover .snb-card__overlay { opacity: 1; }
.snb-card__play { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,.82); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }

.snb-card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 5px; }
.snb-badge { display: inline-block; padding: 4px 10px; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; border-radius: var(--snb-radius); line-height: 1.5; }
.snb-badge--dark { background: var(--snb-dark); color: var(--snb-gold); }
.snb-badge--gold { background: var(--snb-gold); color: #fff; }

.snb-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; gap: 10px; }

.snb-cat-label { display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--snb-radius); }
.snb-cat--rose    { background: #fff1f2; color: #be123c; }
.snb-cat--sky     { background: #f0f9ff; color: #0369a1; }
.snb-cat--emerald { background: #ecfdf5; color: #065f46; }
.snb-cat--amber   { background: #fffbeb; color: #92400e; }
.snb-cat--default { background: #f5f5f4; color: #57534e; }

.snb-card__title { font-family: var(--snb-font-serif); font-size: var(--snb-font-size-card); font-weight: 300; line-height: 1.3; color: var(--snb-dark); margin: 0; cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color var(--snb-tr); }
.snb-card__title:hover { color: var(--snb-gold); }

.snb-card__desc { font-size: 14px; color: var(--snb-stone); line-height: 1.65; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; flex: 1; }

.snb-card__pricing { display: flex; align-items: baseline; gap: 10px; }
.snb-price { font-family: var(--snb-font-serif); font-size: 26px; font-weight: 300; color: var(--snb-dark); letter-spacing: -.01em; }
.snb-price--old { font-size: 14px; color: var(--snb-stone-light); text-decoration: line-through; }
.snb-price--save { font-size: 12px; color: #16a34a; font-weight: 500; }

.snb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px;
  font-family: var(--snb-font-sans); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  border: none; border-radius: var(--snb-radius);
  cursor: pointer; transition: background var(--snb-tr), color var(--snb-tr), opacity var(--snb-tr);
  width: 100%; line-height: 1; color: var(--snb-btn-text);
}
.snb-btn--module { background: var(--snb-btn-module-bg); }
.snb-btn--module:hover { background: var(--snb-gold-dark); }
.snb-btn--in-cart { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0; pointer-events: none; cursor: default; }
.snb-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════ */
/* MODAL                                                                       */
/* ══════════════════════════════════════════════════════════════════════════ */
.snb-modal-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: snbFadeIn .2s ease;
}
.snb-modal-overlay[hidden] { display: none; }
@keyframes snbFadeIn { from { opacity:0 } to { opacity:1 } }
body.snb-modal-open { overflow: hidden; }

.snb-modal {
  background: #fff;
  width: 100%; max-width: 768px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--snb-radius);
  box-shadow: 0 25px 60px rgba(0,0,0,.3);
  position: relative;
  animation: snbSlideUp .25s ease;
}
@keyframes snbSlideUp { from { transform: translateY(24px); opacity:0 } to { transform: translateY(0); opacity:1 } }

.snb-modal__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.snb-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snb-modal__media-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,.8), transparent); pointer-events: none; }

.snb-modal__play-wrap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.snb-modal__play-btn { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(255,255,255,.1); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; }
.snb-modal__play-wrap:hover .snb-modal__play-btn { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.2); }

.snb-modal__video { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; background: #000; }

.snb-modal__close { position: absolute; top: 16px; right: 16px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; background: rgba(13,13,13,.52); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.snb-modal__close:hover { background: rgba(13,13,13,.85); }

.snb-modal__badges { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; }

.snb-modal__body { padding: 32px; display: flex; flex-direction: column; gap: 0; }

.snb-modal__header-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.snb-modal__header-left { flex: 1; min-width: 0; }
.snb-modal__header-right { flex-shrink: 0; text-align: right; }

.snb-modal__cat { display: block; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--snb-gold); font-weight: 300; margin-bottom: 8px; }
.snb-modal__title { font-family: var(--snb-font-serif); font-size: var(--snb-font-size-title); font-weight: 300; line-height: 1.22; color: var(--snb-dark); margin: 0 0 12px; max-width: 480px; }
.snb-modal__meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--snb-stone-light); flex-wrap: wrap; }
.snb-sep { color: #e7e5e4; }

.snb-modal__price-row { display: flex; align-items: flex-end; gap: 8px; justify-content: flex-end; }
.snb-modal__price { font-family: var(--snb-font-serif); font-size: 30px; font-weight: 300; color: var(--snb-dark); line-height: 1; }
.snb-modal__old-price { font-size: 14px; color: var(--snb-stone-light); text-decoration: line-through; margin-bottom: 2px; }
.snb-modal__saving { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--snb-gold); margin-top: 4px; display: block; }

.snb-modal__desc { font-size: 14px; color: var(--snb-stone); line-height: 1.75; margin: 0 0 32px; }
.snb-modal__desc p { margin: 0 0 8px; }

.snb-modal__cta { padding: 16px 20px; font-size: 13px; letter-spacing: .2em; margin-bottom: 16px; }
.snb-modal__trust { text-align: center; font-size: 12px; color: var(--snb-stone-light); letter-spacing: .06em; margin: 0; }

@media (max-width: 640px) {
  .snb-modal__body { padding: 20px; }
  .snb-modal__title { font-size: calc(var(--snb-font-size-title) * .8); }
  .snb-modal__header-row { flex-direction: column; }
  .snb-modal__header-right { text-align: left; }
}