/* LunaVixen Size Guide, front */

.lv-sg { margin: 12px 0 4px; }
.lv-sg[hidden] { display: none; }

.lv-sg-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .6px; text-transform: uppercase; color: #993556;
  background: #FFFFFF; border: 1px solid #F4C0D1; border-radius: 999px;
  padding: 9px 16px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lv-sg-trigger:hover, .lv-sg-trigger:focus-visible { color: #FE4FB7; border-color: #FE4FB7; background: #FBEAF0; }
.lv-sg-trigger svg { width: 15px; height: 15px; }
@media (max-width: 480px) { .lv-sg-trigger { display: flex; width: 100%; justify-content: center; } }

.lv-sg-overlay {
  position: fixed; inset: 0; background: rgba(26,26,26,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1050;
}
.lv-sg-overlay[hidden] { display: none; }

.lv-sg-modal {
  background: #FFFFFF; max-width: 620px; width: 100%; max-height: 88vh;
  overflow-y: auto; position: relative; animation: lvSgRise .25s ease; outline: none;
}
@keyframes lvSgRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .lv-sg-modal { animation: none; } }

.lv-sg-head { padding: 30px 34px 22px; border-bottom: 1px solid #EEEEEE; position: relative; }
.lv-sg-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #993556; margin-bottom: 8px; }
.lv-sg-title { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 24px; color: #1A1A1A; }
.lv-sg-close { position: absolute; top: 22px; right: 24px; background: none; border: none; font-size: 22px; line-height: 1; color: #888880; cursor: pointer; transition: color .15s ease; }
.lv-sg-close:hover, .lv-sg-close:focus-visible { color: #1A1A1A; }

.lv-sg-intro { padding: 20px 34px 4px; font-family: 'Inter', sans-serif; font-size: 14px; color: #2C2C2A; line-height: 1.65; }

.lv-sg-chart { padding: 18px 34px 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lv-sg-chart table { width: auto; min-width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; font-size: 13.5px; color: #1A1A1A; }
.lv-sg-chart th, .lv-sg-chart td { white-space: nowrap; }
.lv-sg-chart thead th { background: #FE4FB7; color: #FFFFFF; font-weight: 600; text-align: left; padding: 12px 14px; letter-spacing: .4px; font-size: 12px; text-transform: uppercase; }
.lv-sg-chart tbody td { padding: 11px 14px; border-bottom: 1px solid #EEEEEE; }
.lv-sg-chart tbody tr:nth-child(even) { background: #FBEAF0; }
.lv-sg-chart tbody td:first-child { font-weight: 600; }
/* keep the Size column in view when a wide chart scrolls sideways */
.lv-sg-chart th:first-child, .lv-sg-chart td:first-child { position: sticky; left: 0; box-shadow: 1px 0 0 #EEEEEE; }
.lv-sg-chart thead th:first-child { background: #FE4FB7; z-index: 2; }
.lv-sg-chart tbody td:first-child { z-index: 1; }
.lv-sg-chart tbody tr:nth-child(odd) td:first-child { background: #FFFFFF; }
.lv-sg-chart tbody tr:nth-child(even) td:first-child { background: #FBEAF0; }

.lv-sg-measure { padding: 22px 34px 30px; border-top: 1px solid #EEEEEE; }
.lv-sg-measure h3 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 17px; color: #1A1A1A; margin: 0 0 12px; }
.lv-sg-mrow { display: flex; gap: 14px; margin-bottom: 12px; align-items: baseline; }
.lv-sg-mkey { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #993556; font-weight: 600; min-width: 70px; }
.lv-sg-mval { font-family: 'Inter', sans-serif; font-size: 13.5px; color: #2C2C2A; line-height: 1.55; }

.lv-sg-deep { display: inline-block; margin: 0 34px 30px; font-family: 'Inter', sans-serif; font-size: 13px; color: #993556; text-decoration: none; border-bottom: 1px solid #F4C0D1; padding-bottom: 2px; }
.lv-sg-deep:hover, .lv-sg-deep:focus-visible { color: #FE4FB7; border-color: #FE4FB7; }

@media (max-width: 480px) {
  .lv-sg-head, .lv-sg-intro, .lv-sg-chart, .lv-sg-measure { padding-left: 20px; padding-right: 20px; }
  .lv-sg-deep { margin-left: 20px; margin-right: 20px; }
}