/* ZELURA Private Label Mockup Studio v1.0 */
.mockup-page {
  background: #eff7f1;
  color: #173824;
  min-height: 100vh;
}

.studio-masthead {
  padding: 42px 0 28px;
  border-bottom: 1px solid #cad9ce;
  background: #f7fbf8;
}

.studio-masthead-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;
}

.studio-masthead h1 {
  margin: 8px 0 10px;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  color: #1b452d;
}

.studio-masthead p {
  max-width: 760px;
  color: #4e6657;
  font-size: 1.03rem;
}

.studio-privacy-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #78927f;
  padding: 9px 12px;
  background: #fff;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

.studio-shell {
  max-width: 1440px;
  padding: 28px 32px 70px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(330px, 384px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.studio-controls,
.studio-preview-card {
  background: #fff;
  border: 1px solid #cad9ce;
  border-radius: 12px;
}

.studio-controls {
  overflow: hidden;
}

.control-section {
  padding: 23px;
  border-bottom: 1px solid #e3ece6;
}

.control-section:last-child { border-bottom: 0; }

.control-overline {
  display: block;
  margin-bottom: 14px;
  color: #1b452d;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.control-help {
  margin: -6px 0 14px;
  color: #607568;
  font-size: .78rem;
  line-height: 1.5;
}

.upload-zone {
  display: block;
  border: 2px dashed #9ab09f;
  border-radius: 10px;
  padding: 22px 14px;
  text-align: center;
  cursor: pointer;
  background: #fbfdfb;
  transition: .18s ease;
}

.upload-zone:hover,
.upload-zone.is-dragging {
  border-color: #1b452d;
  background: #eff7f1;
}

.upload-zone input { display: none; }
.upload-zone svg { color: #1b452d; margin: 0 auto 8px; }
.upload-zone strong { display: block; font-size: .92rem; }
.upload-zone span { display: block; margin-top: 5px; color: #607568; font-size: .74rem; }

.artwork-ready {
  display: none;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-top: 10px;
  background: #f7fbf8;
  border: 1px solid #cad9ce;
  border-radius: 8px;
}
.artwork-ready.is-visible { display: grid; }
.artwork-thumb { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid #dce7df; border-radius: 5px; }
.artwork-meta strong, .artwork-meta span { display: block; }
.artwork-meta strong { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.artwork-meta span { color: #607568; font-size: .7rem; }
.text-action { border: 0; background: none; color: #1b452d; text-decoration: underline; cursor: pointer; font-weight: 700; }

.studio-field { margin-top: 16px; }
.studio-field:first-child { margin-top: 0; }
.studio-field label,
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: .82rem; font-weight: 700; }
.field-value { font-family: Consolas, monospace; font-size: .73rem; color: #4e6657; }

.studio-input,
.studio-select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #9eb1a3;
  border-radius: 8px;
  background: #fff;
  color: #173824;
  font: inherit;
}
.studio-input:focus,
.studio-select:focus,
.studio-button:focus-visible,
.package-tile:focus-visible,
.segment-button:focus-visible,
.swatch:focus-visible { outline: 2px solid #1b452d; outline-offset: 2px; }

.method-status {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  background: #f6f8f6;
  border: 1px solid #cad9ce;
  font-size: .76rem;
  line-height: 1.45;
}
.method-badge { display: inline-block; margin-bottom: 4px; padding: 4px 9px; border-radius: 999px; font-size: .67rem; font-weight: 800; letter-spacing: .06em; }
.method-badge.label { background: #eff7f1; color: #1b452d; }
.method-badge.silk { background: #1b452d; color: #fff; }
.method-badge.review { background: #fbf6e8; color: #674900; }

.method-segmented .segment-button {
  transition: all 0.2s ease;
}
.method-segmented .segment-button.is-active {
  background: #1b452d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(27, 69, 45, 0.2);
}

.package-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.package-tile {
  position: relative;
  min-height: 92px;
  padding: 10px 8px;
  background: #fff;
  border: 1px solid #cad9ce;
  border-radius: 8px;
  color: #173824;
  cursor: pointer;
  text-align: center;
}
.package-tile:hover { border-color: #78927f; }
.package-tile.is-selected { border: 2px solid #1b452d; box-shadow: inset 0 0 0 2px #fbf6e8; }
.package-tile strong, .package-tile small { display: block; }
.package-tile strong { margin-top: 5px; font-size: .73rem; }
.package-tile small { color: #607568; font-size: .65rem; }
.real-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.real-package-tile { min-height: 156px; padding: 7px; }
.real-package-tile img {
  width: 100%;
  height: 105px;
  object-fit: contain;
  object-position: center;
  background: #f8faf9;
  border-radius: 6px;
  pointer-events: none;
}
.real-package-tile strong { margin-top: 7px; line-height: 1.25; }
.package-icon { height: 45px; position: relative; margin: 0 auto; }
.package-icon.dropper::before { content:""; position:absolute; width:26px; height:34px; border-radius:7px 7px 5px 5px; background:linear-gradient(90deg,#6c321b,#b7662f,#4b2015); left:50%; bottom:0; transform:translateX(-50%); }
.package-icon.dropper::after { content:""; position:absolute; width:13px; height:18px; border-radius:8px 8px 3px 3px; background:#1d211f; left:50%; top:0; transform:translateX(-50%); }
.package-icon.airless::before { content:""; position:absolute; width:25px; height:42px; border-radius:4px 4px 7px 7px; background:linear-gradient(90deg,#e8eceb,#fff,#d7dfdc); border:1px solid #cbd7d0; left:50%; bottom:0; transform:translateX(-50%); }
.package-icon.jar::before { content:""; position:absolute; width:48px; height:27px; border-radius:6px 6px 10px 10px; background:linear-gradient(90deg,#dcebe6,#fff,#cbded6); border:1px solid #b9cdc4; left:50%; bottom:2px; transform:translateX(-50%); }
.package-icon.pump::before { content:""; position:absolute; width:22px; height:36px; border-radius:5px; background:linear-gradient(90deg,#d9e5df,#fff,#c4d4cc); border:1px solid #b8cbc1; left:50%; bottom:0; transform:translateX(-50%); }
.package-icon.pump::after { content:""; position:absolute; width:28px; height:5px; background:#d0dbd6; border-radius:3px; left:50%; top:2px; transform:translateX(-45%); }

.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #9eb1a3; border-radius: 8px; padding: 3px; gap: 3px; }
.segment-button { min-height: 38px; border:0; border-radius:5px; background:#fff; color:#4e6657; font-weight:700; cursor:pointer; }
.segment-button.is-active { background:#1b452d; color:#fff; }

.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 42px; height: 42px; border: 2px solid #cad9ce; border-radius: 8px; cursor: pointer; position: relative; }
.swatch.is-selected { outline: 2px solid #1b452d; outline-offset: 2px; }
.swatch.is-selected::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; color:var(--check-color,#fff); text-shadow:0 1px 3px rgba(0,0,0,.45); }
.swatch[data-color="#EED885"],
.swatch[data-color="#EFA72F"],
.swatch[data-color="#DFB748"] {
  background: linear-gradient(135deg, #FFF9DD 0%, #F5E198 25%, #E5CE7A 50%, #FFF4C5 68%, #D4BA5E 86%, #BFA042 100%) !important;
  border: 1.5px solid #C4A84D !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.9), 0 2px 8px rgba(220,195,100,0.4);
  --check-color: #5A4810 !important;
}
.swatch[data-color="#EED885"].is-selected::after,
.swatch[data-color="#EFA72F"].is-selected::after,
.swatch[data-color="#DFB748"].is-selected::after {
  color: #5A4810 !important;
  text-shadow: 0 1px 1px rgba(255, 245, 200, 0.9) !important;
}

.studio-range { width: 100%; height: 44px; accent-color: #1b452d; cursor: pointer; }
.studio-range:disabled { cursor: not-allowed; opacity:.42; }
.controls-disabled-note { padding: 8px 10px; background:#f6f8f6; color:#607568; font-size:.73rem; border-radius:6px; }

.control-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.studio-button { min-height:44px; border-radius:8px; border:1px solid #1b452d; padding:9px 12px; font-weight:700; cursor:pointer; }
.studio-button.primary { background:#1b452d; color:#fff; }
.studio-button.secondary { background:#fff; color:#1b452d; }
.studio-button:disabled { background:#dde7e0; color:#687a6e; border-color:#cbd8ce; cursor:not-allowed; }

.local-privacy { margin-top:14px; padding:12px; background:#eff7f1; border-left:3px solid #1b452d; border-radius:4px; font-size:.74rem; line-height:1.55; }
.studio-error { display:none; margin-top:10px; padding:10px; background:#fff1f1; color:#9e2f35; border:1px solid #e2aeb1; border-radius:7px; font-size:.76rem; }
.studio-error.is-visible { display:block; }

.studio-preview-wrap { position: sticky; top: 100px; }
.studio-preview-card { padding: 18px; box-shadow: 0 8px 24px rgba(27,69,45,.08); }
.preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.preview-toolbar strong { font-size:.9rem; }
.preview-toolbar small { display:block; color:#607568; font-size:.7rem; }
.preview-segments { width:220px; }
.canvas-frame { position:relative; min-height:560px; display:grid; place-items:center; overflow:hidden; border:1px solid #dce7df; border-radius:12px; background:#FFFFFF; }
.photo-mockup-frame { background:#FFFFFF; }
#mockupCanvas { display:block; width:100%; height:auto; max-height:720px; touch-action:none; user-select:none; -webkit-user-select:none; }
.canvas-empty { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); inset:auto; z-index:3; padding:10px 22px; text-align:center; color:#4e6657; pointer-events:none; background:rgba(255,255,255,.94); border:1px solid #cad9ce; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.canvas-empty strong { display:inline; margin-right:6px; color:#1b452d; font-size:.84rem; }
.canvas-empty span { font-size:.78rem; }
.canvas-empty.is-hidden { display:none; }
.preview-protection { position:absolute; inset:0; z-index:5; background:transparent; }
.view-angle-row { display:flex; align-items:center; gap:7px; margin-bottom:10px; flex-wrap:wrap; }
.angle-button { min-height:36px; padding:6px 12px; border:1px solid #9eb1a3; border-radius:6px; background:#fff; color:#1b452d; font-weight:700; cursor:pointer; }
.angle-button.is-active { background:#1b452d; border-color:#1b452d; color:#fff; }
.view-angle-row span { margin-left:auto; color:#607568; font-size:.72rem; }
.preview-note { margin:13px 3px 0; color:#607568; font-size:.74rem; line-height:1.55; }
.accuracy-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:16px; background:#cad9ce; border:1px solid #cad9ce; border-radius:10px; overflow:hidden; }
.accuracy-strip div { padding:13px; background:#fff; }
.accuracy-strip strong,.accuracy-strip span { display:block; }
.accuracy-strip strong { color:#1b452d; font-size:.76rem; }
.accuracy-strip span { margin-top:3px; color:#607568; font-size:.68rem; line-height:1.45; }

.calibration-banner { margin:18px auto 0; max-width:1440px; padding:0 32px; }
.calibration-banner-inner { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:16px 20px; border:1px solid #d8b45b; background:#fbf6e8; border-radius:10px; }
.calibration-banner h2 { margin:0 0 4px; font:600 1rem var(--font-sans); color:#674900; }
.calibration-banner p { margin:0; font-size:.76rem; color:#665b38; }

@media (max-width: 1023px) {
  .studio-shell { grid-template-columns: 320px minmax(0,1fr); padding:22px 20px 60px; gap:16px; }
  .canvas-frame { min-height:470px; }
  .studio-preview-wrap { top:86px; }
}

@media (max-width: 820px) {
  .studio-masthead-row { display:block; }
  .studio-privacy-chip { margin-top:16px; }
  .studio-shell { grid-template-columns:1fr; padding:18px 16px 55px; }
  .studio-preview-wrap { position:static; grid-row:2; }
  .canvas-frame { min-height:420px; }
  .preview-toolbar { align-items:flex-start; flex-direction:column; }
  .preview-segments { width:100%; }
  .accuracy-strip { grid-template-columns:1fr; }
  .calibration-banner { padding:0 16px; }
  .calibration-banner-inner { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 900px) {
  .mockup-page .site-header {
    position: relative;
  }
  .mockup-page .header-inner {
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 8px;
  }
  .mockup-page .nav-menu {
    order: 3;
    display: flex;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .mockup-page .nav-menu li {
    flex: 0 0 auto;
  }
  .mockup-page .nav-link {
    display: block;
    padding: 8px 12px;
    background: #f7fbf8;
    border: 1px solid #cad9ce;
    border-radius: 7px;
    white-space: nowrap;
    font-size: .82rem;
  }
  .mockup-page .nav-link.active {
    background: #1b452d;
    color: #fff;
    border-color: #1b452d;
  }
}

@media (max-width: 520px) {
  .studio-masthead { padding:28px 0 22px; }
  .studio-controls .control-section { padding:19px 16px; }
  .package-grid { grid-template-columns:1fr 1fr; }
  .canvas-frame { min-height:390px; }
  .control-actions { grid-template-columns:1fr; }
  .mockup-page .nav-cta { display:none; }
  .mockup-page .brand-logo img { max-height:52px; }
}