/* Editorial studio layout — responsive refinements, shared with both simulators. */
:root { --bg-dark: #10100f; --card-bg: #191917; --accent-gold: #d9b67a; --accent-gold-light: #edd4a8; --accent-gold-dark: #b18b4d; --text-muted: #b5b1a9; --border-glass: rgba(218,191,147,.18); }
[hidden] { display: none !important; }
html { scroll-padding-top: 100px; }
body { background: var(--bg-dark); }
button, input, select { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; }
header { padding: 14px max(4%, calc((100vw - 1440px) / 2)); gap: 22px; background: rgba(16,16,15,.94); }
header nav { gap: 18px; }
header nav a { font-size: .76rem; }
header > .btn-cta { white-space: nowrap; box-shadow: none; padding: 12px 20px; }
.logo-script { font-size: 1.9rem; }
.menu-toggle { display: none; background: transparent; border: 1px solid var(--border-glass); color: var(--accent-gold); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; }
.btn-cta { background: #dfbd82; box-shadow: none; border-radius: 12px; padding: 14px 22px; font-size: .85rem; }
.btn-cta:hover { background: #edd4a8; box-shadow: 0 8px 22px #0003; }
.glow-bg { opacity: .08; }
.hero { max-width: 1440px; margin: auto; min-height: 760px; padding: 150px 5% 90px; gap: 8%; }
.hero-tag { background: transparent; border: 0; padding: 0; font-size: .7rem; letter-spacing: 3px; }
.hero h1 { font-family: var(--font-serif); font-size: clamp(2.8rem,4.6vw,4.7rem); font-weight: 400; line-height: 1.16; }
.hero h1 span { font-size: 1.3em; }
.hero p { font-size: 1rem; max-width: 440px; line-height: 1.9; }
.hero-portfolio { height: 550px; position: relative; margin-right: 24px; }
.hero-main-photo { width: 85%; height: 100%; object-fit: cover; border-radius: 160px 160px 24px 24px; object-position: center 35%; }
.hero-detail-photo { position: absolute; right: -24px; bottom: 96px; width: 39%; height: 205px; object-fit: cover; border: 7px solid var(--bg-dark); border-radius: 80px 80px 18px 18px; }
.hero-photo-caption { position: absolute; bottom: 0; left: 0; width: 85%; padding: 65px 25px 25px; background: linear-gradient(transparent,#000d); border-radius: 0 0 24px 24px; display: grid; gap: 8px; }
.hero-photo-caption span { font-size: .6rem; letter-spacing: 2px; }
.hero-photo-caption strong { font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; }
.hero-photo-caption a { color: var(--accent-gold-light); font-size: .75rem; text-decoration: none; }
section:not(.hero) { padding: 80px max(4%,calc((100vw - 1360px) / 2)); }
.section-title { margin: 0 auto 38px; max-width: 700px; }
.section-title h2 { font-size: clamp(1.75rem,3vw,2.6rem); line-height: 1.2; font-weight: 600; letter-spacing: -.04em; }
.section-title p { font-size: .95rem; line-height: 1.8; margin-top: 15px; }
.hair-studio-section { background: #151512; }
.hair-simulator-container { padding: 26px; gap: 32px; background: #1b1b18; border-radius: 24px; box-shadow: none; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
.hair-preview-col { min-width: 0; position: sticky; top: 106px; }
.sim-mode-switcher { border-radius: 14px; gap: 4px; background: #11110f; }
.sim-mode-tab { border-radius: 10px; min-height: 44px; padding: 10px; font-size: .78rem; }
.sim-mode-tab.active { background: #dfbd82; box-shadow: none; }
.hair-viewport-box { border-radius: 18px; box-shadow: none; }
.hair-canvas-wrapper { height: auto; aspect-ratio: 4 / 5; max-height: 640px; background: #10100e; }
.hair-photo-layer, #hairResultCanvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
#hairResultCanvas { pointer-events: none; }
.hair-status-bar { gap: 10px; padding: 14px; background: #11110f; }
.hair-info-tag { min-width: 0; font-size: .82rem; }
.hair-status-bar > button { flex-shrink: 0; font-size: .7rem; padding: 8px; }
.hair-view-controls { top: 12px; right: 12px; z-index: 4; }
.hair-btn-tool { border-radius: 9px; min-height: 36px; }
.hair-btn-tool:disabled { opacity: .4; cursor: default; }
.hair-feedback { min-height: 42px; font-size: .76rem; color: var(--accent-gold-light); margin: 12px 0 8px; line-height: 1.6; }
.hair-feedback.is-error { color: #ffb5a5; }
.hair-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.simulation-note { color: var(--text-muted); font-size: .68rem; line-height: 1.6; margin: 12px 0; }
.hair-processing { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: center; background: #1119; color: #fff; backdrop-filter: blur(3px); font-size: .85rem; }
.loading-ring { width: 28px; height: 28px; border: 2px solid #fff3; border-top-color: var(--accent-gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to {transform: rotate(360deg);} }
.client-upload-prompt { z-index: 5; background: #171713f5; cursor: default; padding: 24px; }
.model-selector-row { gap: 8px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.model-card-btn { border-radius: 12px; padding: 10px 3px; font-size: .65rem; }
.hair-controls-col h3 { font-size: 1.45rem; font-weight: 600; }
.hair-category-nav { flex-wrap: wrap; border-bottom: none; gap: 6px; overflow: visible; }
.hair-cat-btn { border: 1px solid var(--border-glass); border-radius: 7px; font-size: .7rem; padding: 8px 10px; }
.hair-swatch-item { font: inherit; border-radius: 12px; padding: 14px 5px; }
.hair-color-circle { width: 40px; height: 40px; }
.hair-swatch-item.active { box-shadow: none; background: #dfbd8212; }
.hairdo-btn { border-radius: 10px; min-height: 62px; }
.hair-sliders-box, .custom-color-picker { border-radius: 12px; }
.custom-range { touch-action: pan-y; }
.studio-container, .scheduler-container { max-width: 1240px; margin: auto; box-shadow: none; border-radius: 24px; }
.grid-3 { max-width: 1240px; margin: auto; }
.music-widget { position: static; width: fit-content; margin: 22px auto; box-shadow: none; }
.whatsapp-float { width: 48px; height: 48px; right: 20px; bottom: 20px; }
.card, .package-card, .transformation-card { box-shadow: none; }
.transformations-gallery { gap: 24px; }
.transformation-photo img { height: 300px; }
.transformation-card-caption { padding: 20px; }
.transformation-details summary { padding: 0 20px 20px; }
@media (max-width: 1180px) {
  header nav { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  header nav.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 20px; background: #151512; border-bottom: 1px solid var(--border-glass); gap: 0; }
  header nav a { padding: 12px; font-size: .9rem; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr 1fr; text-align: left; gap: 30px; min-height: auto; }
  .hero-portfolio { height: 450px; }
  .hero h1 { font-size: 2.7rem; }
  .hair-simulator-container { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; padding: 20px; }
  .hair-preview-col { top: 104px; }
  .hair-swatches-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hairdo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  header { padding: 12px 16px; gap: 10px; }
  .logo-badge { width: 38px; height: 38px; }
  .logo-container { gap: 8px; }
  .logo-script { font-size: 1.6rem; }
  .logo-sub { font-size: .5rem; letter-spacing: 4px; }
  header > .btn-cta { padding: 11px 12px; font-size: .7rem; }
  header > .btn-cta svg { display: none; }
  .menu-toggle { width: 36px; height: 36px; flex-shrink: 0; }
  .hero { grid-template-columns: 1fr; padding: 125px 22px 55px; gap: 38px; }
  .hero h1 { font-size: clamp(2.65rem,9vw,3.7rem); }
  .hero p { font-size: .92rem; margin-bottom: 24px; }
  .hero .btn-cta { padding: 13px 15px; font-size: .75rem; }
  .hero-portfolio { height: 400px; max-width: 450px; width: calc(100% - 24px); margin: 0 auto; }
  .hero-detail-photo { height: 150px; bottom: 80px; }
  section:not(.hero) { padding: 56px 16px; }
  .section-title { margin-bottom: 28px; }
  .section-title p { font-size: .86rem; }
  .hair-simulator-container { grid-template-columns: minmax(0,1fr); padding: 12px; gap: 30px; border-radius: 20px; }
  .hair-preview-col { position: static; }
  .hair-canvas-wrapper { aspect-ratio: 4 / 4.8; max-height: 500px; }
  .hair-swatches-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .hairdo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hair-controls-col { padding: 4px; }
  .hair-swatch-name { font-size: .66rem; }
  .hair-color-circle { width: 32px; height: 32px; }
  .studio-container, .scheduler-container { padding: 16px; }
  .grid-3 { grid-template-columns: minmax(0,1fr); }
  .transformation-photo img { height: 260px; }
  .whatsapp-float { right: 12px; bottom: 12px; }
}
@media (max-width: 360px) { header > .btn-cta { display: none; } .sim-mode-tab { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* Contact information supplied by the salon. */
.contact-section { background: #151512; border-top: 1px solid var(--border-glass); }
.contact-grid { max-width: 1240px; margin: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.contact-card { padding: 28px; border: 1px solid var(--border-glass); border-radius: 20px; background: var(--card-bg); }
.contact-card > svg { color: var(--accent-gold); margin-bottom: 16px; }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 16px; }
.contact-card address, .contact-card p, .opening-hours { font-size: .85rem; font-style: normal; color: var(--text-muted); line-height: 1.9; }
.contact-link { display: block; color: var(--accent-gold-light); text-decoration: none; font-size: .8rem; margin-top: 18px; overflow-wrap: anywhere; }
.contact-link:hover { text-decoration: underline; }
.contact-phone { color: var(--text-main); text-decoration: none; font-size: 1.2rem; }
.opening-hours > div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.opening-hours dd { color: var(--text-main); }
#bookingHours { display: block; margin-top: 8px; color: var(--text-muted); font-size: .75rem; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }

/* One compact, swipeable portfolio, with every original angle retained. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow { display:block; color:var(--accent-gold); font-size:.65rem; letter-spacing:2.5px; margin-bottom:10px; }
.portfolio-carousel { max-width:900px; margin:38px auto 0; background:#191917; border:1px solid var(--border-glass); border-radius:24px; overflow:hidden; }
.portfolio-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 28px; }
.portfolio-toolbar h3 { font-family:var(--font-title); font-size:1.1rem; font-weight:500; }
#portfolioCounter { font-size:.85rem; color:var(--accent-gold); white-space:nowrap; font-variant-numeric:tabular-nums; }
.transformations-gallery.portfolio-track { position:relative; display:flex; max-width:none; margin:0; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.portfolio-track::-webkit-scrollbar { display:none; }
.portfolio-slide { flex:0 0 100%; min-width:0; scroll-snap-align:start; border:0; border-radius:0; box-shadow:none; }
.portfolio-slide > .transformation-images { height:340px; background:#10100f; }
.portfolio-slide .transformation-photo img { height:100%; min-height:0; object-fit:contain; }
.portfolio-slide .transformation-card-caption { padding:18px 28px 12px; }
.portfolio-extras { display:flex; gap:10px; padding:0 28px 16px; overflow-x:auto; height:92px; }
.portfolio-slide:not(:has(.portfolio-extras))::after { content:''; display:block; height:92px; }
.portfolio-extras .transformation-photo { flex:0 0 64px; height:76px; border-radius:8px; overflow:hidden; }
.portfolio-extras .transformation-photo span { font-size:.5rem; padding:2px 4px; left:3px; bottom:3px; }
.portfolio-navigation { display:flex; align-items:center; gap:14px; padding:12px 28px; border-top:1px solid var(--border-glass); }
.carousel-arrow { width:44px; height:44px; flex-shrink:0; border-radius:50%; background:#dfbd8212; border:1px solid var(--border-glass); color:var(--accent-gold); font-size:1.3rem; cursor:pointer; }
.carousel-arrow:hover { background:#dfbd82; color:#111; }
.portfolio-select-label { flex:1; min-width:0; }
#portfolioSelect { width:100%; border:0; border-radius:8px; background:#22221e; color:var(--text-main); padding:12px; font-size:.8rem; }
.portfolio-tip { font-size:.67rem; color:var(--text-muted); text-align:center; padding:0 16px 18px; }
/* Real-photo manicure preview and restrained, accessible color swatches. */
.nail-photo-studio { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; gap:36px; padding:28px; background:#191917; }
.nail-preview-col { min-width:0; }
.nail-photo-viewport { position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; background:#0e0e0d; border:1px solid var(--border-glass); }
.nail-photo-viewport > img, .nail-photo-viewport > canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.nail-compare { position:absolute; top:12px; right:12px; z-index:4; }
.nail-upload-prompt { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:28px; background:#171713f5; }
.nail-upload-prompt strong { font-size:1.25rem; }
.nail-upload-prompt p { color:var(--text-muted); font-size:.85rem; }
.nail-upload-prompt small { color:var(--text-muted); font-size:.68rem; }
.nail-model-picker { display:flex; gap:10px; margin-top:12px; }
.nail-model-picker .model-card-btn { flex:1; flex-direction:row; justify-content:center; gap:12px; }
.nail-model-picker .model-card-thumb { width:36px; height:36px; }
.nail-photo-controls h3 { font-size:1.55rem; margin-bottom:14px; }
.nail-description { font-size:.85rem; color:var(--text-muted); line-height:1.8; margin-bottom:26px; }
#polishSwatches { display:grid; grid-template-columns:repeat(6,44px); gap:6px; margin:12px 0; }
#polishSwatches .swatch { position:relative; display:block; width:44px; height:44px; aspect-ratio:auto; padding:7px; border:1px solid transparent; border-radius:50%; background:transparent; box-shadow:none; transform:none; cursor:pointer; }
#polishSwatches .swatch::before { content:''; display:block; width:28px; height:28px; border-radius:50%; background:var(--polish); box-shadow:inset 0 0 0 1px #ffffff30; }
#polishSwatches .swatch.active { border-color:var(--accent-gold); background:#dfbd8215; }
#polishSwatches .swatch:hover { border-color:var(--text-muted); }
.nail-color-name { font-size:.8rem; color:var(--accent-gold); margin-bottom:16px; }
.nail-photo-controls .custom-color-picker { margin-bottom:0; font-size:.8rem; }
.nail-photo-controls .control-group { margin-bottom:24px; }
.nail-photo-controls .control-group > label { display:flex; justify-content:space-between; gap:12px; font-size:.82rem; }
.nail-preferences { margin-top:25px; border-top:1px solid var(--border-glass); padding-top:24px; }
.nail-preferences h4 { font-size:.95rem; }
.nail-preferences > p { font-size:.74rem; color:var(--text-muted); line-height:1.7; margin:8px 0 18px; }
.nail-booking { width:100%; justify-content:center; margin-top:10px; }
@media(max-width:700px) {
 .portfolio-toolbar { padding:20px 16px; gap:12px; }
 .portfolio-toolbar h3 { font-size:.9rem; }
 .portfolio-slide > .transformation-images { height:280px; }
 .portfolio-slide .transformation-card-caption { padding:16px; }
 .portfolio-extras { padding-left:16px; padding-right:16px; }
 .portfolio-navigation { padding:12px 14px; gap:8px; }
 #portfolioSelect { font-size:.7rem; padding:10px 6px; }
 .nail-photo-studio { grid-template-columns:minmax(0,1fr); padding:12px; gap:28px; }
 .nail-photo-controls { padding:4px; }
 #polishSwatches { grid-template-columns:repeat(6,40px); gap:5px; }
 #polishSwatches .swatch { width:40px; height:44px; padding:7px 5px; }
 .nail-photo-viewport { max-height:500px; }
}
@media(max-width:360px) { #polishSwatches { grid-template-columns:repeat(6,36px); gap:4px; } #polishSwatches .swatch { width:36px; padding:7px 3px; } }
.portfolio-slide > .transformation-images { min-height:0; grid-template-rows:minmax(0,1fr); overflow:hidden; }
.portfolio-slide .transformation-photo { min-height:0; overflow:hidden; }
.portfolio-slide .transformation-card-caption { min-height:82px; }

.nail-model-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.nail-model-picker .model-card-btn { flex-direction:column; gap:7px; min-width:0; }
.nail-model-picker .model-card-thumb { width:48px; height:48px; }
.nail-model-picker .model-card-btn span { font-size:.65rem; }

.music-widget { position:fixed; left:16px; bottom:16px; margin:0; z-index:1001; padding:10px 14px; max-width:calc(100vw - 90px); background:rgba(16,16,15,.95); }
.music-widget .equalizer-bars { display:none; }
@media(max-width:700px) { .music-widget { left:10px; bottom:12px; padding:8px 10px; gap:8px; } .music-widget .music-icon-btn { width:30px; height:30px; } }

/* Shared camera capture for both simulators. */
.camera-prompt-button { margin-top: 10px; }
.photo-camera { width: min(600px, calc(100vw - 28px)); max-height: 90dvh; overflow: auto; box-sizing: border-box; margin: auto; padding: 22px; border: 1px solid #b99760; border-radius: 20px; background: #191a1c; color: #f7f0e5; }
.photo-camera::backdrop { background: rgb(0 0 0 / 78%); }
.camera-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.camera-heading h3 { margin: 0; }
.photo-camera p { font-size: .9rem; margin: 16px 0; }
.photo-camera video { display: block; width: 100%; max-height: 50dvh; object-fit: contain; border-radius: 12px; background: #080808; }
.camera-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.camera-buttons button { min-height: 44px; }
.photo-camera small { color: #c1b8aa; }