/* Shared styles for Sastre Wardrobe, staff console and utility pages */
html { -webkit-tap-highlight-color: transparent; }
body { background: #141A26; color: #F1EDE5; font-family: 'Jost', system-ui, sans-serif; font-weight: 300; }
.display { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; letter-spacing: -0.01em; line-height: 1.04; }
.measure { max-width: 34rem; }
.eyebrow { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: #B8955A; }
.stitch { background-image: linear-gradient(90deg, #B8955A 50%, transparent 50%); background-size: 10px 1px; background-repeat: repeat-x; height: 1px; }
:focus-visible { outline: 2px solid #B8955A; outline-offset: 3px; }
[hidden] { display: none !important; }
.field { width: 100%; background: #141A26; border: 1px solid #343C4C; padding: .8rem .9rem; font-size: .9rem; color: #F1EDE5; border-radius: 0; }
.field:focus { border-color: #B8955A; outline: none; }
.field-label { display: block; font-size: .8rem; color: #C9C4BA; margin-bottom: .4rem; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B8955A' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.2rem; }
.btn-gold { background: #B8955A; color: #141A26; font-weight: 500; padding: .95rem 1.6rem; transition: background .2s; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-gold:hover { background: #F1EDE5; }
.btn-gold:disabled { opacity: .6; cursor: not-allowed; }
.btn-line { border: 1px solid rgba(241,237,229,.3); color: #F1EDE5; padding: .95rem 1.6rem; transition: border-color .2s, color .2s; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-line:hover { border-color: #B8955A; color: #B8955A; }
.chip { flex: none; border: 1px solid rgba(241,237,229,.18); padding: .5rem 1rem; font-size: .85rem; color: #C9C4BA; white-space: nowrap; transition: all .2s; }
.chip:hover { border-color: rgba(184,149,90,.6); color: #F1EDE5; }
.chip[aria-pressed="true"] { background: #F1EDE5; border-color: #F1EDE5; color: #141A26; }
.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
/* piece visuals */
.vis { position: relative; background: #232A38; overflow: hidden; }
.vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.swatch svg { width: 58%; height: 58%; }
.swatch::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px); pointer-events: none; }
/* sheets */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(10,13,20,.78); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 768px) { .sheet-backdrop { align-items: center; padding: 1.5rem; } }
.sheet { background: #1B2130; width: 100%; max-width: 46rem; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: sheetUp .35s cubic-bezier(.2,.7,.2,1); }
  @keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .fade-in { animation: fadeIn .4s ease both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-top { padding-top: env(safe-area-inset-top); }
.heart[aria-pressed="true"] svg { fill: #B8955A; stroke: #B8955A; }
.spinner { width: 22px; height: 22px; border: 1.5px solid rgba(241,237,229,.2); border-top-color: #B8955A; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }