/* Custom-case studio: friendly, tactile form controls that match the lilac/blush storefront. */
#customBuilder {
  background: rgba(37,33,61,.52) !important;
  backdrop-filter: blur(14px) !important;
  padding: 22px !important;
}

.custom-sheet {
  position: relative;
  max-width: 650px !important;
  margin: 4vh auto !important;
  padding: 28px !important;
  background: linear-gradient(145deg, #fffdfd, #fff8fc) !important;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px !important;
  box-shadow: 0 28px 90px rgba(37,33,61,.32) !important;
}

.custom-close {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e6dced;
  background: #fffafd;
  color: #514767;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Studio steps guide */
.studio-steps {
  background: var(--ink, #29233f);
  color: #fff;
  padding: 30px max(24px, 8vw);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.studio-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.studio-step b {
  font: 700 12px 'DM Mono', monospace;
  color: var(--yellow, #fedb71);
  background: rgba(254, 219, 113, 0.12);
  border: 1px solid rgba(254, 219, 113, 0.35);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
}
.studio-step strong {
  display: block;
  font-size: 15px;
  letter-spacing: -.02em;
  color: #fff;
}
.studio-step span {
  display: block;
  color: #c8bbd5;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}
.step-divider {
  font-size: 20px;
  color: #8066a8;
  font-weight: 700;
  user-select: none;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .studio-steps {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px;
  }
  .step-divider {
    display: none;
  }
}

/* Design library notice */
.studio-note {
  max-width: 1080px;
  margin: 0 auto 24px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #fffafd 0%, #f7effa 100%);
  border: 1px solid #ebdfee;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3f3654;
  box-shadow: 0 4px 14px rgba(41, 35, 63, 0.03);
}
.studio-note-pill, .studio-note-badge {
  font: 700 10.5px 'DM Mono', monospace;
  letter-spacing: .06em;
  background: #ecdff4;
  color: var(--pine, #6b5a99);
  padding: 4px 10px;
  border-radius: 99px;
  flex: none;
}
.studio-note-content strong {
  color: var(--ink, #29233f);
  font-weight: 700;
  margin-right: 6px;
}
.studio-note-content span {
  color: #645a73;
}
.studio-note-content b {
  color: var(--ink, #29233f);
  font-weight: 700;
}
@media (max-width: 650px) {
  .studio-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
  }
}

/* Polished Customization Panel */
.builder-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 36px 18px 0;
  border-bottom: 1px solid #ede4f0;
}
.builder-thumb-col {
  width: 58px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid var(--line, #e9dfee);
  background: #fcf9fe;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
}
.builder-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.builder-thumb-fallback {
  font-size: 20px;
  color: var(--pine, #6b5a99);
}
.builder-meta-col {
  flex: 1;
  min-width: 0;
}
.builder-pill {
  display: inline-block;
  font: 700 10px 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pine, #6b5a99);
  background: #f1eaff;
  padding: 3px 8px;
  border-radius: 99px;
  margin-bottom: 4px;
}
.builder-hero h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink, #29233f);
  margin: 0 0 4px;
  line-height: 1.2;
}
.builder-subtext {
  font-size: 12px;
  color: var(--muted, #746c80);
}
.builder-price-col {
  text-align: right;
  flex: none;
}
.builder-price-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink, #29233f);
}
.builder-price-tag {
  font-size: 11px;
  font-weight: 700;
  color: #2e7d32;
  background: #eaf8ea;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 3px;
  display: inline-block;
}

/* Builder progress pills */
.builder-progress {
  display: flex;
  gap: 8px;
  margin: 18px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0e7f3;
}
.step-pill {
  font-size: 11px;
  font-weight: 700;
  color: #9389a3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: #f5f0f9;
}
.step-pill.active {
  color: var(--ink, #29233f);
  background: #ecdff4;
}
.step-pill b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink, #29233f);
  color: #fff;
  font-size: 9px;
}
.step-pill:not(.active) b {
  background: #a99ebc;
}

/* Section styling */
.builder-section {
  padding: 16px 0;
  border-bottom: 1px solid #eee6ef;
}
.required-star {
  color: #d32f2f;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.section-title b {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #29233f);
}
.section-title small {
  font-size: 11px;
  color: var(--muted, #746c80);
}

/* Choose row */
.choose-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.builder-field {
  display: block;
}
.builder-field>span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #29233f);
  margin-bottom: 6px;
}
.builder-field input, .builder-field select, .builder-field textarea {
  width: 100%;
  padding: 12px 14px !important;
  border: 1px solid var(--line, #e9dfee) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink, #29233f);
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.builder-field input:focus, .builder-field select:focus, .builder-field textarea:focus {
  border-color: var(--pine, #6b5a99) !important;
  box-shadow: 0 0 0 3px #f1eaff !important;
}
.builder-field textarea {
  min-height: 80px;
  resize: vertical;
}
.field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.field-header span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #29233f);
}
.char-count {
  font: 500 11px 'DM Mono', monospace;
  color: var(--muted, #746c80);
}
.field-hint {
  display: block;
  font-size: 11px;
  color: var(--muted, #746c80);
  margin-top: 5px;
}

/* Model Finder Guidance */
.model-finder-wrap {
  margin-top: 10px;
}
.model-help-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--pine, #6b5a99);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.model-help-toggle:hover {
  opacity: 0.85;
}
.model-guidance-box {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f8f3fc;
  border: 1px solid #e7dced;
  border-radius: 8px;
}
.guidance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.guidance-card {
  font-size: 12px;
  line-height: 1.5;
  color: #554868;
}
.guidance-title {
  font-weight: 800;
  color: var(--ink, #29233f);
  margin-bottom: 4px;
}
.guidance-card p {
  margin: 0;
}

/* Custom options grid */
.custom-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.opt-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e9dfee);
  border-radius: 8px;
  background: #fffdfd;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #29233f);
  transition: all .2s;
}
.opt-pill:hover {
  border-color: #c9afdf;
  background: #faf6ff;
}
.opt-pill input {
  width: 16px !important;
  height: 16px !important;
  margin: 0;
  accent-color: var(--pine, #6b5a99);
}
.opt-pill:has(input:checked) {
  border-color: var(--pine, #6b5a99);
  background: #f8f1fc;
}

/* Fit Guarantee Card */
.fit-guarantee-card {
  padding: 12px 14px;
  background: #faf5fd;
  border: 1px solid #eadbee;
  border-radius: 8px;
  margin-bottom: 12px;
}
.fit-badge {
  font: 700 11px 'DM Mono', monospace;
  color: var(--pine, #6b5a99);
  margin-bottom: 4px;
  letter-spacing: .04em;
}
.fit-guarantee-card p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #605370;
}
.confirm-model-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}
.confirm-model-label input {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px;
  accent-color: var(--pine, #6b5a99);
  flex: none;
}
.confirm-model-label span b {
  display: block;
  font-size: 12.5px;
  color: var(--ink, #29233f);
}
.confirm-model-label span small {
  display: block;
  font-size: 11px;
  color: var(--muted, #746c80);
  margin-top: 2px;
}

/* Builder Button */
.builder-button {
  width: 100%;
  margin-top: 18px;
  padding: 16px 20px !important;
  background: var(--ink, #29233f) !important;
  color: #fff !important;
  border: 0;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(41, 35, 63, 0.22) !important;
  transition: transform .2s, opacity .2s;
}
.builder-button:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}
.builder-subnote {
  text-align: center;
  font-size: 11px;
  color: var(--muted, #746c80);
  margin: 10px 0 0;
}

/* Cart image sizing */
.order-product .checkout-thumb.design-checkout-img {
  width: 42px !important;
  height: 54px !important;
  max-width: 42px !important;
  object-fit: cover !important;
  flex: 0 0 42px;
}
.order-product > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.order-product {
  min-width: 0;
}
.order-line {
  align-items: flex-start;
}

@media (max-width: 768px) {
  #customBuilder {
    padding: 8px 6px !important;
  }
  .custom-sheet {
    max-width: 100% !important;
    margin: 6px auto !important;
    padding: 16px 14px !important;
    border-radius: 18px !important;
  }
  .custom-close {
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 22px !important;
  }
  .builder-hero {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: start !important;
    padding: 0 34px 12px 0 !important;
  }
  .builder-thumb-col {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 56px !important;
    height: 72px !important;
    align-self: start !important;
  }
  .builder-meta-col {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  .builder-pill {
    font-size: 9.5px !important;
    padding: 2px 7px !important;
    margin-bottom: 2px !important;
  }
  .builder-hero h2 {
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin: 0 0 3px !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  .builder-subtext {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .builder-price-col {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    text-align: left !important;
    margin-top: 2px !important;
  }
  .builder-price-val {
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .builder-price-tag {
    font-size: 10px !important;
    padding: 2px 6px !important;
    margin-top: 0 !important;
  }
  .builder-progress {
    gap: 6px !important;
    margin: 12px 0 10px !important;
    padding-bottom: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .builder-progress::-webkit-scrollbar {
    display: none !important;
  }
  .step-pill {
    font-size: 10px !important;
    padding: 4px 8px !important;
    flex: none !important;
    white-space: nowrap !important;
  }
  .builder-section {
    padding: 12px 0 !important;
  }
  .section-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin-bottom: 10px !important;
  }
  .section-title b {
    font-size: 13px !important;
  }
  .section-title small {
    font-size: 10.5px !important;
  }
  .choose-row, .guidance-grid, .custom-options-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .builder-field input, .builder-field select, .builder-field textarea {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  .model-help-toggle {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    display: inline-block !important;
  }
  .opt-pill {
    padding: 9px 11px !important;
    font-size: 12px !important;
  }
  .fit-guarantee-card {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
  }
  .fit-badge {
    font-size: 10.5px !important;
  }
  .fit-guarantee-card p {
    font-size: 11px !important;
  }
  .confirm-model-label span b {
    font-size: 12px !important;
  }
  .confirm-model-label span small {
    font-size: 10.5px !important;
  }
  .builder-button {
    padding: 14px 16px !important;
    font-size: 13.5px !important;
  }
}

/* Premium Brand Loading Screen: Breathing Logo & Sleek Progress Line */
#catalogLoader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: radial-gradient(circle at 50% 45%, #fffdfd 0%, #fff8fc 50%, #f4ecf9 100%) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink, #29233f) !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1) !important;
}

.loader-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  animation: loaderEntrance .6s cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes loaderEntrance {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.loader-badge {
  font: 700 10.5px 'DM Mono', monospace !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--pine, #6b5a99) !important;
  background: rgba(107, 90, 153, 0.08) !important;
  border: 1px solid rgba(107, 90, 153, 0.2) !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  margin-bottom: 2px !important;
}

.loader-brand {
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  color: var(--ink, #29233f) !important;
  line-height: 1 !important;
  animation: brandBreathing 2.2s ease-in-out infinite !important;
}

.loader-brand i {
  color: var(--lilac, #a67ec5) !important;
  font-style: normal !important;
}

@keyframes brandBreathing {
  0%, 100% {
    opacity: 0.92;
    transform: scale(1);
    filter: drop-shadow(0 2px 8px rgba(166, 126, 197, 0.12));
  }
  50% {
    opacity: 1;
    transform: scale(1.025);
    filter: drop-shadow(0 6px 20px rgba(166, 126, 197, 0.32));
  }
}

.loader-track {
  width: 150px !important;
  height: 3.5px !important;
  background: #ede3f2 !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 6px 0 2px !important;
  box-shadow: inset 0 1px 2px rgba(41, 35, 63, 0.06) !important;
}

.loader-bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 45% !important;
  background: linear-gradient(90deg, #a67ec5, #6b5a99, #ffc9df) !important;
  border-radius: 99px !important;
  animation: sleekProgress 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite !important;
  box-shadow: 0 0 8px rgba(166, 126, 197, 0.4) !important;
}

@keyframes sleekProgress {
  0% {
    left: -45%;
    width: 30%;
  }
  50% {
    width: 60%;
  }
  100% {
    left: 100%;
    width: 30%;
  }
}

.loader-status {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted, #746c80) !important;
  letter-spacing: -0.01em !important;
}

/* Enterprise Asset & Code Protection Shield */
img, .image, .design-card, .cover-photo, .detail-image, .builder-thumb-img, .thumb, .mini-design {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-touch-callout: none !important;
}

input, textarea, select {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}