/* Moorphius Member Collection — shared apparel styles.
   Loaded by apparel.html (dedicated collection page) and index.html (3-Hour
   Massage member shirt popup) so both surfaces stay visually identical. */

/* ---- Shared headings ---- */
.mc-eyebrow{margin:0;color:var(--gold);font-size:11.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase}
.mc-rule{width:74px;height:1px;margin:18px auto;border:0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.mc-subtitle{margin:0;color:#d7bb91;font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1.5}
.mc-intro{margin:16px 0 0;color:#ead9bf;font-size:16.5px;line-height:1.6}

/* ---- Shared shirt selector controls ---- */
.shirt-caption{margin:7px 0 0;color:#b99a6e;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.shirt-note{margin:6px 0 0;color:#8f7550;font-size:11.5px;font-style:italic;letter-spacing:.04em;text-align:center}

.view-toggle-row{display:flex;justify-content:center;margin-top:14px}
.view-toggle{display:inline-flex;padding:3px;border:1px solid rgba(184,137,77,.42);border-radius:999px;background:rgba(255,250,242,.05)}
.view-btn{width:auto;margin:0;padding:9px 22px;border:0;border-radius:999px;background:transparent;color:#d7bb91;font:inherit;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease}
.view-btn:hover{color:#fffaf2}
.view-btn:focus-visible{outline:2px solid rgba(184,137,77,.9);outline-offset:2px}
.view-btn.is-active{background:linear-gradient(135deg,rgba(155,107,53,.95),rgba(184,137,77,.95));color:#fff}

.opt-block{margin-top:18px}
.opt-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;color:#d7bb91;font-size:10.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.opt-value{color:#fffaf2;font-size:12px;font-weight:800;letter-spacing:.08em;text-align:right}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{display:inline-flex;align-items:center;gap:9px;width:auto;margin:0;padding:7px 14px 7px 8px;border:1px solid rgba(184,137,77,.3);border-radius:999px;background:rgba(255,250,242,.045);color:#e0cbaa;font:inherit;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}
.swatch:hover{border-color:rgba(184,137,77,.7);color:#fffaf2;transform:translateY(-1px)}
.swatch:focus-visible{outline:2px solid rgba(184,137,77,.9);outline-offset:2px}
.swatch-chip{flex:none;width:22px;height:22px;border-radius:999px;background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:inset 0 0 0 1px rgba(255,250,242,.24),0 2px 6px rgba(0,0,0,.5)}
.swatch[aria-pressed="true"]{border-color:rgba(184,137,77,.95);background:rgba(184,137,77,.2);color:#fffaf2}
.swatch[aria-pressed="true"] .swatch-chip{box-shadow:inset 0 0 0 1px rgba(255,250,242,.45),0 0 0 2px rgba(184,137,77,.95),0 2px 6px rgba(0,0,0,.5)}
.sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.size-btn{width:auto;margin:0;padding:12px 4px;border:1px solid rgba(184,137,77,.3);border-radius:12px;background:rgba(255,250,242,.045);color:#e0cbaa;font:inherit;font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}
.size-btn:hover{border-color:rgba(184,137,77,.7);color:#fffaf2;transform:translateY(-1px)}
.size-btn:focus-visible{outline:2px solid rgba(184,137,77,.9);outline-offset:2px}
.size-btn[aria-pressed="true"]{border-color:rgba(184,137,77,.95);background:linear-gradient(135deg,rgba(155,107,53,.92),rgba(184,137,77,.92));color:#fff}

/* ---- Shared preview stage and design thumbnails ---- */
.mb-stage{overflow:hidden;border:1px solid rgba(184,137,77,.28);border-radius:18px;background:#080706}
.mb-preview-img{display:block;width:100%;height:min(52vh,430px);object-fit:contain;background:#080706;transition:opacity .2s ease}
.mb-preview-img.is-swapping{opacity:.3}
.mb-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mb-thumb{width:auto;margin:0;padding:6px;border:1px solid rgba(184,137,77,.3);border-radius:14px;background:rgba(255,250,242,.04);font:inherit;text-transform:none;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.mb-thumb:hover{border-color:rgba(184,137,77,.7);transform:translateY(-2px)}
.mb-thumb:focus-visible{outline:2px solid rgba(184,137,77,.9);outline-offset:2px}
.mb-thumb img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;border-radius:9px;background:#080706}
.mb-thumb-name{display:block;margin-top:7px;color:#d7bb91;font-size:9.5px;font-weight:900;letter-spacing:.1em;line-height:1.3;text-transform:uppercase}
.mb-thumb[aria-pressed="true"]{border-color:rgba(184,137,77,.95);background:rgba(184,137,77,.2)}
.mb-thumb[aria-pressed="true"] .mb-thumb-name{color:#fffaf2}

.mb-confirm{width:100%;margin:22px 0 0;padding:16px;border:1px solid rgba(184,137,77,.62);border-radius:16px;background:linear-gradient(135deg,#9b6b35,var(--gold));color:#fff;font:inherit;font-size:14px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:transform .18s ease,filter .18s ease,background .18s ease}
.mb-confirm:hover{transform:translateY(-1px);filter:brightness(1.07)}
.mb-confirm:focus-visible{outline:2px solid rgba(184,137,77,.9);outline-offset:2px}
.mb-confirm.is-confirmed{background:rgba(184,137,77,.16);border-color:rgba(184,137,77,.95);color:#f5eadb}
.mb-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin:14px 0 0;padding:13px 18px;border:1px solid rgba(184,137,77,.6);border-radius:14px;background:rgba(184,137,77,.16);color:#fffaf2;font-size:15px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.mb-summary::before{content:"Your shirt";color:#d7bb91;font-size:10px;letter-spacing:.22em}
.mb-summary[hidden],.view-toggle-row[hidden]{display:none}

/* ---- Member Benefits popup — 3-Hour Massage ---- */
.mb-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:18px;background:rgba(6,5,4,.84);backdrop-filter:blur(6px);opacity:0;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:opacity .28s ease}
.mb-overlay[hidden]{display:none}
.mb-overlay.is-open{opacity:1}
.mb-dialog{position:relative;width:100%;max-width:720px;margin:auto;padding:32px 28px 30px;border:1px solid rgba(184,137,77,.62);border-radius:24px;background:linear-gradient(165deg,#15110d,#0a0806);box-shadow:0 30px 80px rgba(0,0,0,.72);opacity:0;transform:translateY(20px) scale(.98);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.25,1)}
.mb-overlay.is-open .mb-dialog{opacity:1;transform:none}
.mb-close{position:absolute;top:14px;right:14px;width:40px;height:40px;margin:0;padding:0;border:1px solid rgba(184,137,77,.5);border-radius:999px;background:rgba(255,250,242,.07);color:var(--cream);font:inherit;font-size:22px;font-weight:400;line-height:1;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.mb-close:hover{background:rgba(184,137,77,.26);border-color:rgba(184,137,77,.95)}
.mb-close:focus-visible{outline:2px solid rgba(184,137,77,.9);outline-offset:2px}
.mb-head{max-width:520px;margin:0 auto;padding-right:34px;text-align:center}
.mb-title{margin:12px 0 0;color:var(--cream);font-size:clamp(23px,5vw,33px);font-weight:900;letter-spacing:.08em;line-height:1.15;text-transform:uppercase}
.mb-section{margin-top:26px;padding-top:26px;border-top:1px solid rgba(184,137,77,.22)}
.mb-h3{margin:0 0 16px;color:var(--cream);font-size:17px;font-weight:900;letter-spacing:.18em;line-height:1.3;text-transform:uppercase;text-align:center}
.mb-copy{margin:12px 0 0;color:#ead9bf;font-size:15.5px;line-height:1.6;text-align:center}
.mb-included{padding:22px;border:1px solid rgba(184,137,77,.55);border-radius:18px;background:linear-gradient(135deg,rgba(184,137,77,.2),rgba(9,8,6,.7))}
.mb-kicker{margin:0;color:#fffaf2;font-size:clamp(19px,4.2vw,25px);font-weight:900;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;text-align:center}
.mb-addon-list{margin:12px 0 0;color:var(--gold);font-size:14px;font-weight:800;letter-spacing:.14em;line-height:1.6;text-transform:uppercase;text-align:center}
.mb-reward{padding:24px 22px;border:1px solid rgba(184,137,77,.6);border-top:1px solid rgba(184,137,77,.6);border-radius:18px;background:linear-gradient(135deg,rgba(184,137,77,.22),rgba(9,8,6,.72));box-shadow:inset 0 0 0 1px rgba(184,137,77,.14)}
.mb-reward-head{margin:0;color:var(--gold);font-size:clamp(20px,4.4vw,27px);font-weight:900;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;text-align:center}
.mb-fineprint{margin:14px 0 0;color:#b99a6e;font-size:12.5px;line-height:1.55;text-align:center}
.mb-continue{width:100%;margin:26px 0 0;padding:18px;border:0;border-radius:16px;background:linear-gradient(135deg,#9b6b35,var(--gold));color:#fff;font:inherit;font-size:16px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:transform .18s ease,filter .18s ease}
.mb-continue:hover{transform:translateY(-1px);filter:brightness(1.07)}
.mb-continue:focus-visible{outline:2px solid rgba(184,137,77,.9);outline-offset:2px}
.body-locked{overflow:hidden}

/* ---- Member shirt summary inside the booking form ---- */
.member-shirt-field{margin:16px 0 4px;padding:15px 17px;border:1px solid rgba(184,137,77,.55);border-left:4px solid var(--gold);border-radius:16px;background:linear-gradient(135deg,rgba(184,137,77,.19),rgba(245,234,219,.55))}
.member-shirt-field[hidden]{display:none}
.member-shirt-label{margin:0;color:#7c552e;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.member-shirt-value{margin:6px 0 0;color:#3d2c1f;font-size:16px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.member-benefits-open{display:inline-flex;align-items:center;width:auto;margin-top:13px;padding:9px 17px;border:1px solid rgba(184,137,77,.6);border-radius:999px;background:rgba(184,137,77,.13);color:#7c552e;font:inherit;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.member-benefits-open:hover,.member-benefits-open:focus-visible{background:rgba(184,137,77,.24);border-color:rgba(184,137,77,.92);transform:translateY(-1px);outline:none}

/* ---- Dedicated Apparel page ---- */
.apparel-main{display:grid;gap:18px}
.apparel-hero{padding:36px 26px 34px;border:1px solid rgba(184,137,77,.4);border-radius:24px;background:linear-gradient(160deg,rgba(21,17,13,.96),rgba(11,9,7,.97));box-shadow:0 24px 70px rgba(0,0,0,.42);text-align:center}
.apparel-hero-inner{max-width:660px;margin:0 auto}
.apparel-hero h1{margin:12px 0 0;color:var(--cream);font-family:inherit;font-size:clamp(28px,6vw,46px);font-weight:900;letter-spacing:.09em;line-height:1.1;text-transform:uppercase}
.apparel-panel{padding:30px 28px 32px;border:1px solid rgba(184,137,77,.5);border-radius:24px;background:linear-gradient(165deg,#15110d,#0a0806);box-shadow:0 24px 64px rgba(0,0,0,.5)}
.apparel-panel-head{max-width:560px;margin:0 auto 22px;text-align:center}
.apparel-panel-title{margin:0;color:var(--cream);font-size:clamp(18px,3.6vw,22px);font-weight:900;letter-spacing:.18em;line-height:1.3;text-transform:uppercase}
.apparel-panel-note{margin:10px 0 0;color:#b99a6e;font-size:13.5px;line-height:1.55}
.apparel-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.apparel-actions[hidden]{display:none}
.apparel-continue{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border:1px solid rgba(184,137,77,.72);border-radius:16px;background:linear-gradient(135deg,#9b6b35,var(--gold));color:#fff;text-decoration:none;font-size:13.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transition:transform .18s ease,filter .18s ease}
.apparel-continue:hover,.apparel-continue:focus-visible{transform:translateY(-1px);filter:brightness(1.07);outline:none}
.apparel-clear{width:auto;margin:0;padding:14px 22px;border:1px solid rgba(184,137,77,.6);border-radius:16px;background:rgba(255,250,242,.06);color:#ead9bf;font:inherit;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.apparel-clear:hover,.apparel-clear:focus-visible{background:rgba(184,137,77,.24);border-color:rgba(184,137,77,.95);outline:none}

.mc-info{display:grid;grid-template-columns:136px 1fr;align-items:center;gap:24px;padding:24px;border:1px solid rgba(184,137,77,.45);border-radius:20px;background:linear-gradient(135deg,rgba(184,137,77,.15),rgba(9,8,6,.86))}
.mc-seal{width:136px;height:136px;padding:8px;border:1px solid rgba(184,137,77,.45);border-radius:18px;background:#080706;object-fit:contain}
.mc-info-title{margin:0;color:var(--cream);font-size:21px;font-weight:900;letter-spacing:.12em;line-height:1.25;text-transform:uppercase}
.mc-info-copy{margin:12px 0 0;color:#ead9bf;font-size:16px;line-height:1.6}
.mc-info-note{margin:12px 0 0;color:#b99a6e;font-size:13.5px;line-height:1.55}

@media(max-width:760px){
  .mc-info{grid-template-columns:1fr;justify-items:center;gap:18px;padding:22px 18px;text-align:center}
  .mb-thumbs{grid-template-columns:repeat(2,1fr);gap:12px}
  .mb-thumb-name{font-size:10.5px}
}
@media(max-width:600px){
  .mc-intro{font-size:15.5px}
  .view-btn{padding:15px 26px;font-size:12.5px}
  .swatch{padding:9px 15px 9px 9px;font-size:11.5px}
  .swatch-chip{width:24px;height:24px}
  .sizes{grid-template-columns:repeat(3,1fr);gap:9px}
  .size-btn{padding:15px 4px;font-size:14.5px}
  .mb-overlay{padding:10px}
  .mb-dialog{padding:26px 16px 24px;border-radius:20px}
  .mb-head{padding-right:44px}
  .mb-close{top:12px;right:12px;width:44px;height:44px}
  .mb-section{margin-top:22px;padding-top:22px}
  .mb-included,.mb-reward{padding:20px 16px}
  .mb-preview-img{height:min(56vh,400px)}
  .mb-copy{font-size:15px}
  .mb-continue{padding:17px;font-size:15px}
  .apparel-hero{padding:26px 18px 28px;border-radius:20px}
  .apparel-panel{padding:22px 16px 24px;border-radius:20px}
  .apparel-continue,.apparel-clear{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .view-btn,.swatch,.size-btn,.mb-overlay,.mb-dialog,.mb-thumb,.mb-preview-img,.mb-confirm,.mb-continue,.apparel-continue,.apparel-clear,.member-benefits-open{transition:none}
}