/* Mayna Diamonds — component styles (cards, modals, forms, filters) */

/* ---------- product card ---------- */
.p-card{position:relative}
.p-card .p-media{position:relative;overflow:hidden;border-radius:18px;background:var(--beige)}
.p-card img{transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .7s}
.p-card .img-alt{position:absolute;inset:0;opacity:0}
.p-card:hover .img-main{transform:scale(1.06)}
.p-card:hover .img-alt{opacity:1;transform:scale(1.03)}
.p-card .p-actions{position:absolute;left:0;right:0;bottom:0;padding:1rem;display:flex;gap:.5rem;opacity:0;transform:translateY(12px);transition:all .5s cubic-bezier(.22,1,.36,1)}
.p-card:hover .p-actions{opacity:1;transform:none}
.p-chip{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:rgba(248,245,239,.92);backdrop-filter:blur(6px);padding:.55rem .9rem;border-radius:9999px;flex:1;text-align:center;cursor:pointer;transition:all .35s;border:1px solid transparent}
.p-chip:hover{background:var(--ink);color:var(--ivory)}
.p-tag{position:absolute;top:1rem;left:1rem;font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;background:var(--emerald);color:#fff;padding:.4rem .8rem;border-radius:9999px}
.p-wish{position:absolute;top:.85rem;right:.85rem;width:2.2rem;height:2.2rem;border-radius:9999px;background:rgba(248,245,239,.92);display:flex;align-items:center;justify-content:center;transition:all .35s;cursor:pointer}
.p-wish:hover{background:var(--ink);color:#fff}
.p-wish.active{background:var(--emerald);color:#fff}

/* glass */
.glass{background:rgba(248,245,239,.72);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6)}
.glass-dark{background:rgba(2,24,48,.55);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14)}

/* ---------- forms ---------- */
.field label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:.55rem;line-height:1.8;overflow-wrap:anywhere}
@media (max-width:640px){.field label{letter-spacing:.12em}}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(2,24,48,.28);
  padding:.7rem 0;font-size:1rem;font-weight:400;letter-spacing:.02em;outline:none;
  transition:border-color .35s;border-radius:0;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field input::placeholder{color:var(--stone);opacity:.6}
.field .err{display:none;font-size:.8rem;font-weight:500;color:#8F2F21;margin-top:.4rem;letter-spacing:.04em}
.field.invalid input{border-color:#9a3b2e}
.field.invalid .err{display:block}

/* selector pills (product page) */
.sel-pill{border:1.5px solid rgba(2,24,48,.3);padding:.6rem 1.2rem;border-radius:9999px;font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .35s;background:transparent}
.sel-pill:hover{border-color:var(--ink)}
.sel-pill.active{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.metal-dot{width:2.4rem;height:2.4rem;border-radius:9999px;cursor:pointer;border:2px solid transparent;outline:1px solid var(--line);outline-offset:3px;transition:all .3s}
.metal-dot.active{outline-color:var(--gold)}

/* accordion */
details.lux summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:1.15rem 0;font-size:.82rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
details.lux summary::-webkit-details-marker{display:none}
details.lux summary::after{content:"+";font-size:1.4rem;color:var(--gold);transition:transform .35s}
details.lux[open] summary::after{transform:rotate(45deg)}
details.lux{border-bottom:1px solid var(--line)}

/* quickview / modal */
.modal-veil{position:fixed;inset:0;z-index:80;background:rgba(2,24,48,.5);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1.25rem}
.modal-veil.open{display:flex;animation:veilIn .35s ease}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--ivory);border-radius:22px;max-width:900px;width:100%;max-height:90vh;overflow:auto;animation:cardIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}

/* toast */
#toast{position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%) translateY(20px);z-index:90;background:var(--ink);color:var(--ivory);font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:.9rem 1.8rem;border-radius:9999px;opacity:0;pointer-events:none;transition:all .45s cubic-bezier(.22,1,.36,1)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* scroll progress */
#scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:99;width:0}

/* qty stepper */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9999px}
.qty button{width:2.3rem;height:2.3rem;font-size:1rem;color:var(--stone);transition:color .3s}
.qty button:hover{color:var(--ink)}
.qty span{min-width:2rem;text-align:center;font-size:.95rem;font-weight:500}

/* filter chips */
.f-chip{border:1.5px solid rgba(2,24,48,.3);border-radius:9999px;padding:.58rem 1.25rem;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .35s;background:transparent}
.f-chip:hover{border-color:var(--gold);color:var(--emerald)}
.f-chip.active{background:var(--emerald);color:#fff;border-color:var(--emerald)}

/* instagram tile */
.ig-tile{position:relative;overflow:hidden;border-radius:16px}
.ig-tile img{transition:transform 1s cubic-bezier(.22,1,.36,1)}
.ig-tile:hover img{transform:scale(1.08)}
.ig-tile .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,46,93,.78),transparent 60%);opacity:0;transition:opacity .5s;display:flex;align-items:flex-end;padding:1rem;color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.2em}
.ig-tile:hover .veil{opacity:1}

/* auth split page */
.auth-visual{position:relative;overflow:hidden}
.auth-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(2,24,48,.05),rgba(2,24,48,.55))}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- shop sidebar filters ---------- */
.flt-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.5rem .6rem;border-radius:10px;font-size:.92rem;transition:all .3s;cursor:pointer}
.flt-row:hover{background:var(--beige)}
.flt-row[aria-checked="true"]{background:var(--ink);color:var(--ivory)}
.flt-row[aria-checked="true"] .flt-n{color:var(--gold-soft)}
.flt-check{display:flex;align-items:center;gap:.7rem;font-size:.92rem;cursor:pointer;padding:.15rem .1rem;user-select:none}
.flt-check span:first-of-type{flex:1}
.flt-n{font-size:.72rem;font-weight:600;color:var(--stone)}

/* active filter chips above grid */
.af-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--emerald);color:#fff;border-radius:9999px;padding:.45rem 1rem;font-size:.74rem;font-weight:600;letter-spacing:.06em;transition:background .3s}
.af-chip:hover{background:var(--ink)}

/* ---------- pagination ---------- */
.page-btn{min-width:2.5rem;height:2.5rem;padding:0 .6rem;border:1.5px solid rgba(2,24,48,.25);border-radius:9999px;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;transition:all .3s;cursor:pointer}
.page-btn:hover:not(:disabled){border-color:var(--ink)}
.page-btn.active{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.page-btn:disabled{opacity:.35;cursor:not-allowed}

/* ---------- skip link ---------- */
.skip-link{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--emerald);color:#fff;padding:.8rem 1.4rem;border-radius:0 0 12px 12px;font-size:.8rem;font-weight:600;letter-spacing:.08em;transition:top .3s}
.skip-link:focus{top:0}

/* ---------- checkout stepper ---------- */
.ck-step{display:flex;align-items:center;gap:.5rem;color:var(--stone)}
.ck-step .ck-n{width:1.7rem;height:1.7rem;border-radius:9999px;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem}
.ck-step.active{color:var(--emerald)}
.ck-step.done{color:var(--gold-text)}
.ck-step.done .ck-n::after{content:"✓"}
.ck-step.done .ck-n{font-size:0}
.ck-step.done .ck-n::after{font-size:.72rem}
.ck-bar{flex:1;height:1px;background:var(--line);min-width:.8rem}
.ck-radio{display:flex;gap:1rem;align-items:flex-start;border:1.5px solid rgba(2,24,48,.2);border-radius:16px;padding:1.1rem 1.25rem;cursor:pointer;transition:all .3s}
.ck-radio:hover{border-color:var(--gold)}
.ck-radio:has(input:checked){border-color:var(--emerald);background:rgba(0,46,93,.05)}
.ck-radio input{margin-top:.3rem;width:1rem;height:1rem}
@media (max-width:640px){.ck-step span:not(.ck-n){display:none}.ck-step.active span:not(.ck-n){display:inline}}

@media print{
  body *{visibility:hidden}
  #inv-body,#inv-body *{visibility:visible}
  #inv-modal{position:absolute;inset:0;background:#fff}
  #inv-body button{display:none}
}

/* ---------- navy theme adjustments ---------- */
.mobile-menu a{color:#F2EFE7}
.mobile-menu .eyebrow{color:var(--gold-soft)}

/* ---------- category quick-nav ---------- */
.cat-dot{display:flex;flex-direction:column;align-items:center;gap:.6rem;font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--ink);white-space:nowrap;flex-shrink:0;transition:color .3s}
.cat-dot:hover{color:var(--navy)}
.cat-img{width:64px;height:64px;border-radius:9999px;overflow:hidden;border:2px solid var(--gold-soft);padding:2px;background:#fff;transition:border-color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.cat-img img{width:100%;height:100%;object-fit:cover;border-radius:9999px}
.cat-dot:hover .cat-img{border-color:var(--navy);transform:translateY(-3px)}
@media (min-width:768px){.cat-img{width:76px;height:76px}}

/* ---------- offer cards ---------- */
.offer-card{display:block;border-radius:20px;padding:1.6rem 1.7rem;color:#fff;background:linear-gradient(120deg,var(--navy) 0%,#0A4A8C 100%);border:1px solid rgba(216,190,140,.35);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.offer-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,30,60,.25)}
.offer-kicker{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--gold-soft);margin-bottom:.6rem}

/* ---------- price tiles ---------- */
.price-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:var(--beige);border:1.5px solid transparent;border-radius:18px;padding:2rem 1rem;text-align:center;transition:all .4s cubic-bezier(.22,1,.36,1)}
.price-tile:hover{border-color:var(--gold);background:#fff;transform:translateY(-4px)}

/* ---------- YouTube cards ---------- */
.yt-card{min-width:0}
.yt-face{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--navy-deep);cursor:pointer}
.yt-face img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.yt-face:hover img{transform:scale(1.05)}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3.4rem;height:3.4rem;border-radius:9999px;background:rgba(0,46,93,.85);backdrop-filter:blur(6px);border:1px solid rgba(216,190,140,.5);color:#fff;display:flex;align-items:center;justify-content:center;padding-left:3px;transition:all .35s}
.yt-face:hover .play-btn{background:var(--gold);color:#0B1B30;transform:translate(-50%,-50%) scale(1.08)}
.yt-dur{position:absolute;bottom:.7rem;right:.7rem;background:rgba(0,20,45,.8);color:#fff;font-size:.7rem;font-weight:600;padding:.25rem .55rem;border-radius:8px}
.yt-ph{width:100%;aspect-ratio:16/9;border-radius:16px;border:2px dashed rgba(0,46,93,.35);background:rgba(0,46,93,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;color:var(--navy);text-align:center;font-size:.8rem;font-weight:500;line-height:1.5}

.yt-brand{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy) 0%,#0A4A8C 100%)}
.yt-brand img{position:static}

/* ---------- language switcher ---------- */
.lang-select{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid rgba(216,190,140,.45);border-radius:9999px;color:#F2EFE7;font-size:.78rem;font-weight:600;padding:.42rem 1.9rem .42rem .9rem;cursor:pointer;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D8BE8C' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;transition:border-color .3s}
.lang-select:hover,.lang-select:focus-visible{border-color:var(--gold)}
.lang-select option{color:#13243A;background:#fff}
.mobile-menu .lang-select{align-self:flex-start}