/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Nuosu+SIL&family=Qwigley&display=swap');

:root{
  --bg:#0a0f1d; --text:#dff3ff; --muted:rgba(223,243,255,.8);
  --glass:rgba(255,255,255,.04); --outline:rgba(255,255,255,.08);
  --cta-a:#2837ff; --cta-b:#3de3ff;
  --slot-w:86px; --slot-h:74px; --gap:18px;
}
.fp-page{ color:var(--text); background: radial-gradient(1200px 800px at 15% -10%, rgba(81,92,255,.25), transparent 70%), var(--bg); }

/* Outer wrapper */
.fp-wrap{
  max-width:1200px; margin:0 auto; padding:40px 20px; display:grid; gap:28px;
}

/* 3-column content grid: hero | center | summary */
.fp-content-grid{
  display:grid;
  grid-template-columns: 1.1fr 1.3fr 0.9fr;
  gap:28px;
  align-items:start;
}

.glass{ background:var(--glass); border:1px solid var(--outline); border-radius:22px; box-shadow: inset 0 10px 50px rgba(0,0,0,.6), 0 10px 40px rgba(0,204,255,.12); }

/* Typography mapping */
.fp-title{ font-family:'Qwigley', cursive; font-size:44px; line-height:1.1; margin:0 0 8px; color:#fff; }
.fp-sub{ font-family:'Inter', sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); margin:8px 0 6px; }
.fp-desc{ font-family:'Nuosu SIL', serif; font-size:15px; line-height:1.8; color:var(--muted); }

/* Price fonts use Inter */
.fp-row, .fp-total, .fp-acc-body .price, .pearl .price, .js-base-price{ font-family:'Inter', sans-serif; }

/* Hero & center column */
.fp-hero{ padding:22px; overflow:hidden; } .fp-hero img{ width:100%; border-radius:14px; display:block; }
.fp-center{ text-align:center; max-width:620px; margin:0 auto; }

/* Pearl selector */
.pearl-wrap{ max-width:calc(var(--slot-w)*4 + var(--gap)*3); margin:22px auto; text-align:center; }
.pearl-heading{ margin:0 0 10px; font-size:12.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); font-family:'Inter',sans-serif; }
.pearl-selector{ position:relative; width:calc(var(--slot-w)*4 + var(--gap)*3); margin:0 auto; padding:8px 10px; }
.pearl-active{ position:absolute; top:0; left:0; width:var(--slot-w); height:var(--slot-h); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:26px; transition:transform .28s ease; z-index:0; }
.pearl-list{ position:relative; z-index:1; display:flex; gap:var(--gap); justify-content:center; align-items:flex-start; }
.pearl{ width:var(--slot-w); height:var(--slot-h); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.pearl button{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.35); box-shadow: inset 0 0 4px rgba(255,255,255,.35); cursor:pointer; transition:all .25s ease; }
.pearl[data-active="true"] button{ border-color: transparent; box-shadow: 0 0 12px #00e1ff, 0 0 30px rgba(0,225,255,.45) inset, inset 0 0 4px rgba(255,255,255,.45); transform:scale(1.05); }
.pearl .price{ margin-top:6px; font-size:13px; color:#dff3ff; }
.pearl[data-active="true"] .price{ color:#fff; font-weight:600; }

.fill-blue{background: radial-gradient(65% 65% at 40% 35%, #a7eeff, #39d8ff 55%, #0b99c7 100%);} .fill-gold{background: radial-gradient(65% 65% at 40% 35%, #fff5b3, #ffd767 55%, #e0b233 100%);} .fill-pink{background: radial-gradient(65% 65% at 40% 35%, #ffd8f1, #ff9fe2 55%, #ef6cc9 100%);} .fill-silver{background: radial-gradient(65% 65% at 40% 35%, #ffffff, #e5e5e5 55%, #cfcfcf 100%);}

/* Actions */
.fp-actions{ display:flex; gap:18px; justify-content:center; align-items:center; margin:12px 0 18px; flex-wrap:wrap; }
.fp-actions .btn{ background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:8px 12px; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif; }
.fp-actions .btn:hover{ box-shadow:0 0 12px rgba(0,225,255,.25); }

/* Summary top-right (sticky) */
.fp-summary{
  grid-column: 3; grid-row: 1 / span 2; position: sticky; top: 24px;
  background: var(--glass); border: 1px solid var(--outline); border-radius: 22px; padding: 18px; height: fit-content;
}
.fp-row{ display:flex; justify-content:space-between; font-size:14px; padding:6px 0; }
.fp-total{ display:flex; justify-content:space-between; font-size:18px; font-weight:700; margin-top:10px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.15); }
.fp-pay{ display:flex; gap:10px; margin:12px 0; }
.fp-pay .btn{ flex:1; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); text-align:center; cursor:pointer; }
.fp-terms{ display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); margin:10px 0 12px; }

/* CTA Buttons */
.fp-buy{ width:100%; padding:14px; border-radius:14px; background:linear-gradient(90deg,var(--cta-a),var(--cta-b)); border:none; color:#fff; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; }
.fp-add{ width:100%; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; font-weight:600; cursor:pointer; margin-top:10px; font-family:'Inter',sans-serif; }

/* Accessories under grid, full-width, 3-up */
.fp-acc-list{
  grid-column: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
  align-items: start;
}
.fp-acc-item{
  display: flex; gap: 14px; padding: 12px;
  background: var(--glass); border: 1px solid var(--outline);
  border-radius: 16px; cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}
.fp-acc-item:hover{ transform: translateY(-1px); }
.fp-acc-item.active{ border-color:#31ddff; box-shadow:0 0 14px rgba(49,221,255,.35); }
.fp-acc-thumb img{ width:96px; height:96px; object-fit:cover; border-radius:12px; display:block; }
.fp-acc-body{ flex:1; min-width:0; }
.fp-acc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.fp-acc-body .name{ font-size:15px; font-weight:600; font-family:'Inter',sans-serif; }
.fp-acc-body .price{ font-size:14px; color:#fff; font-weight:600; }
.fp-acc-body .desc{ font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:4px; font-family:'Nuosu SIL',serif; }

/* Responsive */
@media(max-width:1024px){
  .fp-content-grid{ grid-template-columns:1fr; gap:20px; }
  .fp-summary{ grid-column:1; grid-row:auto; position:static; width:100%; }
  .fp-acc-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(max-width:640px){
  .fp-acc-list{ grid-template-columns: 1fr; }
  .fp-acc-thumb img{ width:80px; height:80px; }
}


/* Toast for Add-to-Cart feedback */
.fp-toast{
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.fp-toast.show{ opacity: 1; transform: translateY(0); }
.fp-toast.success{ border-color: rgba(0,255,180,.4); box-shadow: 0 0 20px rgba(0,255,180,.15); }
.fp-toast.error{ border-color: rgba(255,80,80,.5); box-shadow: 0 0 20px rgba(255,80,80,.15); }