* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #151515;
  color: #f5f5f5;
  font-family: Arial, sans-serif;
}

header {
  padding: 28px 20px;
  text-align: center;
  background: #1d1d1d;
  border-bottom: 2px solid #991f2b;
}

header h1 {
  margin: 0 0 8px;
}

header p {
  margin: 0;
  color: #bbbbbb;
}

main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 24px auto;
  padding: 0 20px;
}

.viewer {
  min-width: 0;
  height: 550px;
  background: #252525;
  border: 1px solid #444;
  border-radius: 10px;
  overflow: hidden;
}

#model-viewer {
  width: 100%;
  height: 100%;
}

#model-viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.controls {
  background: #202020;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 24px;
}

.controls h2 {
  margin-top: 0;
}

.color-section {
  margin: 24px 0;
}

.color-section h3 {
  margin-bottom: 6px;
}

.selected-color {
  margin: 0 0 14px;
  color: #cccccc;
  font-size: 14px;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 10px;
}

.color-swatch {
  width: 38px;
  height: 38px;
  border: 2px solid #666;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.color-swatch:hover {
  transform: scale(1.12);
  border-color: #ffffff;
}

.color-swatch.selected {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.color-swatch:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.color-disclaimer {
  color: #aaaaaa;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 750px) {
  main {
    grid-template-columns: 1fr;
  }

  .viewer {
    height: 400px;
  }
}

.viewer { position: relative; }
.viewer-status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(0, 0, 0, .75);
  color: #f5f5f5;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  pointer-events: none;
}
.viewer-status[hidden] { display: none; }

.viewer-status.error { color: #fff; background: rgba(120,22,32,.96); max-width: calc(100% - 24px); line-height: 1.5; pointer-events: auto; }

/* GSDICE customer-facing accordion controls */
.controls-intro { color:#c6c6c6; font-size:14px; line-height:1.55; margin:0 0 20px; }
.component-accordion { display:flex; flex-direction:column; gap:10px; }
.color-section { margin:0; border:1px solid #484848; background:#252525; border-radius:9px; overflow:hidden; }
.color-section[open] { border-color:#a84350; background:#282426; }
.component-summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px; min-height:68px; }
.component-summary::-webkit-details-marker { display:none; }
.component-summary:focus-visible { outline:2px solid #e9afba; outline-offset:-3px; }
.component-color-preview { flex:none; width:32px; height:32px; border-radius:7px; border:1px solid #777; box-shadow:inset 0 0 0 1px #ffffff1a; }
.component-title { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.component-title strong { font-size:15px; }
.component-title small { font-size:12px; color:#b4b4b4; line-height:1.25; }
.component-summary .selected-color { margin:0; text-align:right; font-size:13px; color:#eee; font-weight:600; max-width:110px; }
.expand-indicator { width:9px; height:9px; border-right:2px solid #bbb; border-bottom:2px solid #bbb; transform:rotate(45deg); margin-left:2px; margin-right:5px; flex:none; transition:transform .15s; }
.color-section[open] .expand-indicator { transform:rotate(225deg); }
.color-section-content { border-top:1px solid #484044; padding:16px 14px 14px; }
.palette-label { margin:0 0 14px; color:#d3c9cb; font-size:13px; }
.swatch-grid { grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:12px; }
.color-swatch { width:40px; height:40px; border-radius:50%; position:relative; border:2px solid #777; padding:0; }
.color-swatch.selected { outline-color:#f0c5cb; border-color:#fff; }
.color-swatch.selected::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; font-size:18px; font-weight:bold; color:var(--check-color,#fff); text-shadow:0 1px 2px #0005; }
.palette-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; color:#bcbcbc; font-size:12px; }
.next-part, .reset-colors { background:#302a2c; border:1px solid #82505a; color:#f6eeee; border-radius:7px; padding:9px 11px; cursor:pointer; font:inherit; font-size:13px; }
.next-part:hover, .reset-colors:hover { border-color:#d37c8a; background:#493037; }
.next-part:focus-visible, .reset-colors:focus-visible { outline:2px solid white; outline-offset:2px; }
.controls-actions { margin:18px 0 8px; display:flex; justify-content:flex-end; }
@media (max-width:750px) { .controls { padding:18px; } .component-summary { padding:12px; gap:10px; } .component-summary .selected-color { max-width:92px; } }

/* GSDICE design summary - reflects active color selections */
.design-review { margin-top: 24px; padding: 19px; border: 1px solid #68444c; background: #271f22; border-radius: 10px; }
.design-review-heading h3 { margin: 0 0 6px; font-size: 19px; }
.design-review-heading p { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: #c6bfc2; }
.design-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.design-review-item { display: flex; align-items: center; gap: 10px; min-width: 0; background: #30292c; border: 1px solid #51474b; border-radius: 8px; padding: 12px 10px; }
.design-review-dot { flex: none; width: 27px; height: 27px; border-radius: 50%; border: 1px solid #8d8588; }
.design-review-text { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.design-review-label { font-size: 12px; color: #c8bfc2; }
.design-review-text strong { font-size: 14px; overflow-wrap: anywhere; }
.copy-design { display: block; width: 100%; padding: 12px; margin-top: 17px; border: 1px solid #b46270; border-radius: 8px; background: #8b2639; color: white; font: inherit; font-size: 14px; font-weight: bold; cursor: pointer; }
.copy-design:hover { background: #aa3049; }
.copy-design:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.copy-feedback { margin: 9px 0 0; color: #e8cdd2; font-size: 13px; min-height: 0; }
.copy-feedback:empty { display: none; }
.review-note { margin: 11px 0 0; font-size: 12px; color: #bbb0b4; line-height: 1.5; }
@media (max-width: 430px) { .design-review { padding: 14px; } .design-review-item { padding: 10px 8px; gap: 8px; } .design-review-dot { width: 23px; height: 23px; } }

/* Shareable custom designs */
.share-design-area { border-top:1px solid #59424a; margin-top:19px; padding-top:17px; }
.share-design-area h4 { margin:0 0 6px; font-size:16px; }
.share-design-area > p { line-height:1.5; }
.share-design-area > p:first-of-type { margin:0 0 13px; color:#d4c8cb; font-size:13px; }
.share-design { display:block; width:100%; padding:12px; background:#352c30; color:#fff; border:1px solid #c27483; border-radius:8px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.share-design:hover { background:#51353d; }
.share-design:focus-visible { outline:3px solid white; outline-offset:2px; }
.share-link { display:block; width:100%; box-sizing:border-box; border:1px solid #997580; border-radius:7px; background:#19181a; color:#fff; padding:10px; margin-top:12px; font:inherit; font-size:12px; }
.share-link[hidden] { display:none; }
.share-feedback { color:#f0d4da; font-size:13px; margin:10px 0 0; }
.share-feedback:empty { display:none; }
.share-note { font-size:12px; color:#bdb4b7; margin:12px 0 0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* GSDICE branding & order instructions */
.site-header { padding: 17px 20px; }
.brand-lockup { display:flex; align-items:center; justify-content:center; gap:15px; max-width:1400px; margin:0 auto; text-align:left; }
.brand-logo { width:74px; height:74px; object-fit:contain; flex:0 0 auto; }
.brand-copy h1 { margin:0 0 7px; line-height:1.12; }
.brand-copy p { margin:0; }
.viewer-hint { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); margin:0; padding:6px 12px; background:rgba(18,18,18,.72); border-radius:20px; color:#e7dfe1; white-space:nowrap; font-size:12px; pointer-events:none; z-index:1; }
.etsy-order-guidance { border-top:1px solid #68444c; padding-top:17px; margin-top:17px; }
.etsy-order-heading { display:flex; align-items:center; gap:10px; }
.etsy-mini-logo { object-fit:contain; flex:0 0 42px; }
.etsy-order-heading h4 { font-size:16px; margin:0 0 4px; }
.etsy-order-heading p { font-size:13px; color:#d5c8cc; line-height:1.5; margin:0; }
.etsy-order-steps { margin:14px 0 5px; padding-left:24px; font-size:13px; color:#e3d9dc; line-height:1.55; }
.etsy-order-steps li { margin:7px 0; padding-left:2px; }
@media (max-width:750px) {
  .site-header { padding:14px 12px; }
  .brand-lockup { gap:9px; justify-content:center; }
  .brand-logo { width:48px; height:48px; }
  .brand-copy h1 { font-size:clamp(20px,5.3vw,27px); }
  .brand-copy p { font-size:13px; }
  .viewer { height:350px; }
  main { margin-top:14px; gap:14px; padding:0 14px; }
  .component-title small { font-size:13px; }
  .viewer-hint { bottom:8px; font-size:11px; }
  .swatch-grid .color-swatch { min-width:40px; min-height:40px; }
}
@media (max-width:375px) {
  .brand-logo { width:43px; height:43px; }
  .brand-copy h1 { font-size:20px; }
}

/* Glow Preview toggle, visually independent of the 3D canvas */
.glow-preview-toggle {
  position:absolute; z-index:3; top:13px; right:13px;
  padding:10px 13px; min-height:42px;
  border-radius:8px; border:1px solid #b67d89;
  background:rgba(29,24,29,.94); color:#fff; font:inherit;
  font-size:13px; font-weight:700; cursor:pointer;
}
.glow-preview-toggle:hover { background:#4e313d; }
.glow-preview-toggle.active { border-color:#b9daee; background:#253248; }
.glow-preview-toggle:focus-visible { outline:3px solid white; outline-offset:2px; }
.glow-disclaimer {
  position:absolute; z-index:2; top:65px; right:13px;
  max-width:min(260px,calc(100% - 26px)); margin:0;
  padding:5px 8px; border-radius:5px;
  background:rgba(8,11,18,.75); color:#d1d2dc;
  font-size:10px; line-height:1.35; text-align:right; pointer-events:none;
}
@media(max-width:750px) {
  .glow-preview-toggle { top:8px; right:8px; min-height:40px; padding:8px 11px; }
  .glow-disclaimer { top:56px; right:8px; max-width:190px; font-size:9px; }
}

/* GSDICE logo badge — Option A: soft ivory */
/* Existing gsdice-logo.png is transparent, so no image replacement is needed. */
.brand-logo {
  background-color: #F7F5F1;
  border-radius: 50%;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
@media (max-width: 750px) {
  .brand-logo { padding: 5px; }
}
@media (max-width: 375px) {
  .brand-logo { padding: 4px; }
}


/* GSDICE pre-launch customer tools */
.viewer-actions {
  position: absolute;
  left: 12px;
  bottom: 45px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 24px);
}
.viewer-actions button {
  background: rgba(27, 23, 27, .93);
  color: #f7eeee;
  border: 1px solid #a56a78;
  border-radius: 7px;
  padding: 9px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.viewer-actions button:hover:not(:disabled) { background: #51343c; }
.viewer-actions button:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.viewer-actions button:disabled { opacity: .45; cursor: wait; }
.etsy-listing-link {
  display: block;
  margin-top: 11px;
  padding: 12px;
  text-align: center;
  color: #fff;
  border: 1px solid #bd8a96;
  background: #392d32;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.etsy-listing-link:hover { background: #51353d; }
.etsy-listing-link:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.etsy-return-note { color: #e5d5d8; font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.color-disclaimer { line-height: 1.6; }
@media (max-width: 750px) {
  .viewer-actions { bottom: 43px; left: 9px; gap: 6px; }
  .viewer-actions button { padding: 9px; font-size: 11px; }
}