/*
 * Hooje Studio visual refresh — phase 1
 * Appearance only: the existing layout, information architecture and behavior stay intact.
 */

:root {
  --hj-ink: #06080d;
  --hj-ink-soft: #0b0e14;
  --hj-surface: #11151d;
  --hj-surface-raised: #151a23;
  --hj-surface-muted: #0e1219;
  --hj-line: rgba(196, 203, 216, 0.14);
  --hj-line-strong: rgba(196, 203, 216, 0.24);
  --hj-copy: #eceef2;
  --hj-copy-muted: #a9b0bd;
  --hj-violet: #9698e8;
  --hj-violet-soft: rgba(150, 152, 232, 0.12);
  --hj-brass: #b99a62;
  --hj-brass-soft: rgba(185, 154, 98, 0.12);
  --hj-radius-card: 9px;
  --hj-radius-control: 8px;
  --hj-shadow-card: none;
}

body {
  background-color: var(--hj-ink) !important;
  background-image:
    radial-gradient(ellipse 90% 48% at 50% -12%, rgba(150, 152, 232, 0.09), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 32%) !important;
}

#hj-grain {
  opacity: 0.025 !important;
  mix-blend-mode: soft-light !important;
}

#hj-title {
  text-shadow: none !important;
}

#hj-goldline {
  width: 180px !important;
  height: 18px !important;
  margin: 3px auto -1px !important;
  background: url("assets/ornaments/hooje-header-divider-v1.svg") center / 180px 18px no-repeat !important;
  opacity: 0.88;
}

.header-addon-actions {
  margin-left: 50% !important;
  transform: translateX(-50%);
}

/* Keep the established three-zone masthead; only prevent its centre lockup from wrapping. */
@media (min-width: 768px) {
  #app-container > header > :nth-child(2) {
    overflow: visible;
  }

  #app-container > header #hj-title + #hj-goldline + div {
    white-space: nowrap;
  }
}

#app-container .font-black {
  font-weight: 700 !important;
}

/* A restrained material hierarchy replaces the interchangeable glass-card look. */
header,
#sidebar,
#hj-footer {
  background-color: rgba(8, 11, 16, 0.96) !important;
  border-color: var(--hj-line) !important;
  box-shadow: none !important;
}

/* Bespoke atelier ornamentation: raster engravings, deliberately kept near watermark strength. */
#detail-panel {
  background-color: var(--hj-ink) !important;
  background-image:
    url("assets/ornaments/hooje-corner-subtle-v1.png"),
    url("assets/ornaments/hooje-drafting-traces-subtle-v1.png") !important;
  background-position: left -64px top 24px, center 58% !important;
  background-repeat: no-repeat !important;
  background-size: 220px auto, 96% auto !important;
  background-attachment: local !important;
}

.glass-panel {
  background: rgba(11, 14, 20, 0.94) !important;
  border-color: var(--hj-line) !important;
  box-shadow: var(--hj-shadow-card) !important;
  backdrop-filter: blur(8px) !important;
}

#category-list > div,
#fav-category-container > div,
#notice-state .rounded-2xl,
.hjg-card,
#req-mats-container button,
#fee-crafter-section button,
#opt-mats-container button,
#embellish-mats-container button {
  background-color: var(--hj-surface) !important;
  border-color: var(--hj-line) !important;
  border-radius: var(--hj-radius-card) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), var(--hj-shadow-card) !important;
}

#category-list > div:hover,
#fav-category-container > div:hover,
#req-mats-container button:hover,
#fee-crafter-section button:hover,
#opt-mats-container button:hover,
#embellish-mats-container button:hover {
  background-color: var(--hj-surface-raised) !important;
  border-color: var(--hj-line-strong) !important;
}

.starfall-pulse:hover,
.ugdog-pulse:hover,
.hooje-pulse:hover,
.yt-pulse:hover,
.sawang-pulse:hover,
#category-list .border-b:hover,
#req-mats-container button:hover,
#fee-crafter-section button:hover,
#opt-mats-container button:hover,
#embellish-mats-container button:hover {
  transform: none !important;
}

/* One quiet accent system: violet for interaction, brass for provenance and five-star cues. */
.text-\[\#8788EE\] { color: #b1b2ef !important; }
.border-\[\#8788EE\]\/50,
.border-\[\#8788EE\]\/55,
.border-\[\#8788EE\]\/70 { border-color: rgba(150, 152, 232, 0.42) !important; }

#addon-download-link,
#addon-download-link-2 {
  background-image: none !important;
  background-color: var(--hj-brass-soft) !important;
  border-color: rgba(185, 154, 98, 0.45) !important;
  color: #dcc59b !important;
}

#addon-download-link:hover,
#addon-download-link-2:hover {
  background-color: rgba(185, 154, 98, 0.17) !important;
  border-color: rgba(205, 176, 121, 0.7) !important;
}

/* Controls read as crafted interface parts, not inflated landing-page pills. */
#app-container button,
#app-container select,
#app-container textarea,
#app-container input {
  border-radius: var(--hj-radius-control);
}

#search-input {
  background-color: var(--hj-surface-muted) !important;
  border-color: var(--hj-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

#search-input:focus {
  border-color: rgba(150, 152, 232, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(150, 152, 232, 0.08) !important;
}

.hj-status-message {
  white-space: normal;
  overflow: hidden;
  line-height: 1.3;
  max-height: 2.6em;
  word-break: keep-all;
  width: max-content;
  max-width: min(34vw, 560px);
}

#my-order-summary {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

.header-utility-stack > a,
.header-utility-stack > div {
  width: 190px;
  min-height: 0;
  flex: 1 1 0;
}

.header-utility-stack {
  gap: 8px;
}

.detail-heading-row {
  padding-top: 34px;
}

.detail-heading-ornament {
  width: min(560px, calc(100% - 32px));
  height: 20px;
  background: url("assets/ornaments/hooje-heading-flourish-v1.svg") center / 100% 20px no-repeat;
  opacity: 0.8;
}

#detail-icon {
  border-color: #4a5160 !important;
  box-shadow: inset 0 0 0 1px rgba(196, 203, 216, 0.05) !important;
  filter: saturate(0.94) contrast(1.03);
}

#detail-cart-btn-wrapper > button {
  box-shadow: none !important;
  transform: none !important;
}

.status-notice-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#category-list .border-b,
#fav-category-container .border-b {
  background: rgba(10, 13, 19, 0.24);
}

#category-list .border-b:hover,
#fav-category-container .border-b:hover {
  background: rgba(196, 203, 216, 0.055) !important;
}

/* Compact component family: materials, choices, maker information and actions share one rhythm. */
.hj-compact-tile,
.hj-choice-tile,
.hj-info-tile,
.hj-primary-action {
  min-width: 0;
  border-radius: var(--hj-radius-control) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.hj-compact-tile,
.hj-choice-tile,
.hj-info-tile {
  background-color: rgba(17, 21, 29, 0.96) !important;
  border-color: var(--hj-line) !important;
}

.hj-choice-tile {
  overflow: hidden;
  flex: 0 0 calc((100% - 8px) / 2);
}

.hj-choice-label .inline-flex {
  justify-content: center;
  vertical-align: middle;
}

.hj-choice-tile img,
.hj-compact-tile img {
  image-rendering: auto;
  box-shadow: 0 0 0 1px rgba(220, 225, 235, 0.12);
}

.hj-choice-tile:hover,
.hj-info-tile:hover,
.hj-compact-tile:hover {
  background-color: var(--hj-surface-raised) !important;
  border-color: var(--hj-line-strong) !important;
}

.hj-primary-action {
  min-height: 42px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* Maker authentication trial: intentionally unboxed, like ink laid directly on the atelier surface. */
.maker-authentication {
  align-self: stretch;
  opacity: 0.9;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.maker-authentication-seal {
  width: clamp(58px, 7vw, 78px);
  height: clamp(58px, 7vw, 78px);
  filter: saturate(0.76) brightness(0.9);
}

.maker-authentication-signature,
.maker-authentication-portrait {
  image-rendering: auto;
  filter: saturate(0.5) brightness(0.9);
}

.maker-authentication-signature {
  z-index: 2;
  color: #c4cbd8;
  font-family: "Great Vibes", cursive;
  font-size: clamp(31px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: left;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.48);
}

.maker-authentication-portrait {
  max-height: 100%;
}

.maker-authentication:hover {
  opacity: 1;
}

@media (min-width: 640px) {
  .hj-choice-tile {
    flex-basis: calc((100% - 24px) / 4);
  }
}

@media (min-width: 768px) {
  .hj-choice-tile {
    flex-basis: calc((100% - 40px) / 6);
  }
}

/* Section engraving: visible enough to register, quiet enough to stay behind the information. */
#detail-color-bar::after,
#opt-mats-section > h4::after,
#embellish-mats-section > h4::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 28px;
  margin-left: 10px;
  background: linear-gradient(90deg, rgba(185, 154, 98, 0.36), rgba(150, 152, 232, 0.11), transparent);
}

#detail-icon-wrapper {
  filter: saturate(0.96) contrast(1.03);
}

/* Floating utilities retain the original circular identity. */
#float-cluster > button,
#float-cluster > a,
#coffee-fx button {
  width: 44px !important;
  height: 44px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  box-shadow: 0 7px 18px -11px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}

#coffee-fx img {
  border-radius: 9999px !important;
}

#float-cluster {
  gap: 9px !important;
}

#coffee-fx {
  gap: 8px !important;
}

/* Keep feedback motions, remove ambient spectacle. */
.ticker-pulse {
  background: rgba(150, 152, 232, 0.055) !important;
  border-color: rgba(150, 152, 232, 0.18) !important;
  animation: none !important;
  box-shadow: none !important;
}

.ticker-pulse::after,
.gold-border-shine::after {
  animation: none !important;
  opacity: 0 !important;
}

span[style*="Great Vibes"] {
  animation: none !important;
  text-shadow: 0 1px 12px rgba(150, 152, 232, 0.28) !important;
}

.lo-card {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.025) !important;
  border-color: var(--hj-line) !important;
  box-shadow: none !important;
}

.lo-card:hover {
  border-color: var(--hj-line-strong) !important;
  box-shadow: 0 8px 22px -18px rgba(0, 0, 0, 0.95) !important;
}

/* Preserve strong semantic feedback while reducing the permanent neon halo. */
.order-pulse {
  animation: none !important;
  box-shadow: 0 0 0 1px rgba(var(--sc-rgb, 135, 136, 238), 0.14) !important;
}

@keyframes orderPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(var(--sc-rgb, 135, 136, 238), 0.16);
    border-color: rgba(var(--sc-rgb, 135, 136, 238), 0.55);
  }
  50% {
    box-shadow: 0 0 18px rgba(var(--sc-rgb, 135, 136, 238), 0.15);
    border-color: rgba(var(--sc-rgb, 135, 136, 238), 0.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-pulse,
  .lo-dot-pulse,
  #coffee-fx,
  .hj-steam path {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  .hj-status-message {
    width: auto;
    max-width: calc(100vw - 76px);
  }

  #detail-panel {
    background-position: left -90px top 16px, center 58% !important;
    background-size: 230px auto, 980px auto !important;
  }

  .maker-authentication {
    max-height: 164px;
  }

  .maker-authentication-seal {
    width: 62px;
    height: 62px;
  }

  .maker-authentication-signature {
    font-size: clamp(30px, 10vw, 44px);
  }
}