/* Customise Your Vision layout. Scoped: enqueued on the page-customise.php template.
   Mirrors the <style> block from design-reference/src/customise.body.html. */

.cust-hero { background: var(--mv-coal); border: 1px solid var(--mv-line-strong); padding: var(--mv-s10) var(--mv-s6); }
.cust-hero__grid { display: grid; gap: var(--mv-s8); }
.cust-timeline { display: flex; flex-direction: column; gap: var(--mv-s3); }
.cust-timeline__row { display: flex; justify-content: space-between; padding-bottom: var(--mv-s3); border-bottom: 1px solid var(--mv-line); }
.cust-paths { display: grid; gap: var(--mv-s6); }
.cust-path { border: 1px solid var(--mv-line-strong); background: rgba(20,19,15,0.5); padding: var(--mv-s8); display: flex; flex-direction: column; gap: var(--mv-s4); }
.cust-config { display: grid; gap: var(--mv-s12); }
/* The preview photograph. Fixed 4/5 box so the sticky column has a height to
   hold before the image loads, and cover so an editor's own upload cannot
   stretch in it. */
.cust-config__media { aspect-ratio: 4/5; overflow: hidden; }
.cust-config__media img { width: 100%; height: 100%; object-fit: cover; }
.cust-config__block { padding-bottom: var(--mv-s5); border-bottom: 1px solid var(--mv-line); margin-bottom: var(--mv-s6); }
.cust-config__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--mv-s3); }
.cust-quote { border: 1px solid var(--mv-highlight); background: var(--mv-hi-tint); padding: var(--mv-s8); display: grid; gap: var(--mv-s6); }

/* Fluent Forms mount point (placeholder until the form is built) */
.cust-formph { border: 1px dashed var(--mv-hi-soft); background: rgba(230,207,163,0.04); padding: var(--mv-s8); }
.cust-formph code { font-family: var(--mv-mono); color: var(--mv-highlight); }

@media (min-width: 768px) {
  .cust-hero { padding: var(--mv-s16) var(--mv-s16); }
  .cust-hero__grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .cust-paths { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .cust-config { grid-template-columns: 1fr 1fr; align-items: start; }
  .cust-config__preview { position: sticky; top: 200px; }
  .cust-quote { grid-template-columns: 1fr auto; align-items: center; }
}

/* --- Field skin (all viewports): dark, transparent, thin rule, gold focus --- */
.mv-customise .frm-fluent-form input[type="text"],
.mv-customise .frm-fluent-form input[type="email"],
.mv-customise .frm-fluent-form input[type="tel"],
.mv-customise .frm-fluent-form input[type="number"],
.mv-customise .frm-fluent-form input[type="url"],
.mv-customise .frm-fluent-form input[type="search"],
.mv-customise .frm-fluent-form select,
.mv-customise .frm-fluent-form textarea,
.mv-customise .frm-fluent-form .ff-el-form-control {
  width: 100% !important;
  padding: 13px 16px !important;
  background: rgba(20,19,15,0.35) !important;
  border: 1px solid var(--mv-line) !important;
  border-radius: 0 !important;
  color: var(--mv-default) !important;
  font-family: var(--mv-serif) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  transition: border-color var(--mv-dur-fg) var(--mv-ease);
}
.mv-customise .frm-fluent-form textarea { min-height: 110px !important; resize: vertical; }
.mv-customise .frm-fluent-form input::placeholder,
.mv-customise .frm-fluent-form textarea::placeholder { color: var(--mv-faint) !important; font-style: italic; }
.mv-customise .frm-fluent-form input:focus,
.mv-customise .frm-fluent-form select:focus,
.mv-customise .frm-fluent-form textarea:focus,
.mv-customise .frm-fluent-form .ff-el-form-control:focus { outline: none !important; border-color: var(--mv-highlight) !important; }

/* Labels */
.mv-customise .frm-fluent-form .ff-el-input--label { margin-bottom: var(--mv-s3); }
.mv-customise .frm-fluent-form .ff-el-input--label label,
.mv-customise .frm-fluent-form legend {
  font-family: var(--mv-mono); font-size: var(--mv-fs-meta); letter-spacing: var(--mv-ls-meta);
  text-transform: uppercase; color: var(--mv-mute); font-weight: 400;
}
.mv-customise .frm-fluent-form .ff-el-is-required-label,
.mv-customise .frm-fluent-form .ff_optional { color: var(--mv-faint); }
.mv-customise .frm-fluent-form .ff-el-group { margin-bottom: var(--mv-s6); }
.mv-customise .frm-fluent-form a { color: var(--mv-highlight); }

/* Checkboxes (privacy + bespoke acknowledgement) */
.mv-customise .frm-fluent-form .ff-el-form-check { display: flex; align-items: flex-start; gap: var(--mv-s3); }
.mv-customise .frm-fluent-form .ff-el-form-check-label { text-transform: none; letter-spacing: normal; font-family: var(--mv-serif); font-size: 0.875rem; color: var(--mv-mute); }
.mv-customise .frm-fluent-form input[type="checkbox"],
.mv-customise .frm-fluent-form input[type="radio"] { width: 16px !important; height: 16px !important; accent-color: var(--mv-highlight); margin-top: 2px; }

/* File upload (Reference Image) */
.mv-customise .frm-fluent-form .ff_upload_btn,
.mv-customise .frm-fluent-form .ff-el-file-uploads label {
  display: inline-flex; align-items: center; gap: var(--mv-s3);
  padding: 14px 18px; cursor: pointer;
  background: rgba(230,207,163,0.04); border: 1px dashed var(--mv-hi-soft);
  color: var(--mv-mute); font-family: var(--mv-sans); font-size: var(--mv-fs-ui);
  letter-spacing: var(--mv-ls-caps); text-transform: uppercase;
}
.mv-customise .frm-fluent-form .ff_upload_btn:hover { border-color: var(--mv-highlight); color: var(--mv-highlight); }

/* Submit */
.mv-customise .frm-fluent-form .ff-btn-submit,
.mv-customise .frm-fluent-form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 16px 34px; margin-top: var(--mv-s4);
  background: var(--mv-highlight) !important; border: 1px solid var(--mv-highlight) !important; border-radius: 0 !important;
  color: var(--mv-ink) !important; cursor: pointer;
  font-family: var(--mv-sans); font-size: var(--mv-fs-ui); font-weight: 500;
  letter-spacing: var(--mv-ls-caps); text-transform: uppercase;
  transition: background var(--mv-dur-bg) var(--mv-ease), color var(--mv-dur-fg) var(--mv-ease);
}
.mv-customise .frm-fluent-form .ff-btn-submit:hover,
.mv-customise .frm-fluent-form button[type="submit"]:hover { background: var(--mv-hi-fill-solid) !important; color: var(--mv-hi-text-on) !important; border-color: var(--mv-hi-fill-solid) !important; }

/* Validation + success on-brand */
.mv-customise .frm-fluent-form .error,
.mv-customise .frm-fluent-form .text-danger,
.mv-customise .frm-fluent-form .ff-message-danger { color: var(--mv-highlight) !important; font-family: var(--mv-mono); font-size: var(--mv-fs-meta); }
.mv-customise .frm-fluent-form .ff-el-is-error input,
.mv-customise .frm-fluent-form .ff-el-is-error select,
.mv-customise .frm-fluent-form .ff-el-is-error textarea { border-color: var(--mv-highlight) !important; }
.mv-customise .frm-fluent-form .ff-message-success { border: 1px solid var(--mv-highlight); background: var(--mv-hi-tint); padding: var(--mv-s6); color: var(--mv-default); }

/* Named grid areas keep optional fields independent of their source order. */
.mv-customise [hidden] { display: none !important; }
.mv-customise .frm-fluent-form > fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cust-config-heading { text-align: center; margin-bottom: var(--mv-s10); }
.cust-config-heading h1 { margin-block: var(--mv-s4); }
.cust-section-title { margin: 0 0 var(--mv-s4); font-family: var(--mv-sans); font-size: .625rem; letter-spacing: var(--mv-ls-wide); text-transform: uppercase; color: var(--mv-highlight); }
.cust-preview { border: 1px solid var(--mv-line); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; margin-bottom: var(--mv-s6); }
.cust-preview img { width: 100%; height: 340px; object-fit: contain; }
.cust-preview button { margin: 24px 12px; }
.cust-preview [data-preview-status]:empty { display: none; }
.cust-preview [data-preview-status] { padding: 12px; margin: 0; text-align: center; }
.mv-customise select option { color: var(--mv-default); background: var(--mv-coal); }
.mv-customise select:disabled { opacity: .45; cursor: not-allowed; }
.mv-customise [data-standard-sizes] { margin-top: 12px; }
.mv-customise [data-standard-sizes] label { display: block; margin-bottom: 6px; }
/* Stone gallery: native radio semantics with generous, fully clickable choices. */
.mv-customise .cust-stone-picker { position: relative; }
.mv-customise .cust-stone-picker summary { list-style: none; cursor: pointer; padding: 8px 16px; border: 1px solid var(--mv-line); min-height: 62px; display: flex; align-items: center; gap: 14px; background: rgba(20,19,15,.35); transition: border-color .2s, background .2s; }
.mv-customise .cust-stone-picker summary::-webkit-details-marker { display: none; }
.mv-customise .cust-stone-picker summary:hover, .mv-customise .cust-stone-picker[open] summary { border-color: var(--mv-hi-soft); background: rgba(230,207,163,.04); }
.mv-customise #cust-stone-selected { margin-right: auto; font-family: var(--mv-serif); font-size: 18px; }
.mv-customise .cust-stone-chevron { width: 7px; height: 7px; border-right: 1px solid var(--mv-highlight); border-bottom: 1px solid var(--mv-highlight); transform: translateY(-2px) rotate(45deg); margin-left: 4px; transition: transform .2s; }
.mv-customise .cust-stone-picker[open] .cust-stone-chevron { transform: translateY(2px) rotate(225deg); }
.mv-customise .cust-stone-thumb { position: relative; display: block; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(230,207,163,.2), 0 3px 10px rgba(0,0,0,.25); }
.mv-customise .cust-stone-thumb img { position: absolute; left: 50%; top: 50%; width: var(--stone-size, 100%); height: var(--stone-size, 100%); max-width: none; object-fit: contain; transform: translate(calc(-1 * var(--stone-x, 50%)), calc(-1 * var(--stone-y, 50%))); }
.mv-customise .cust-stone-clear { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-left: auto; border: 1px solid rgba(230,207,163,.18); border-radius: 50%; color: var(--mv-highlight); background: radial-gradient(circle,rgba(230,207,163,.09),transparent); font: 32px/1 Georgia,serif; }
.mv-customise .cust-stone-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(480px, calc(100vw - 48px)); z-index: 20; padding: 18px; background: #191814; border: 1px solid rgba(230,207,163,.24); border-radius: 4px; box-shadow: 0 18px 48px rgba(0,0,0,.42); }
.mv-customise .cust-stone-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 14px; color: var(--mv-default); font: 19px/1.3 var(--mv-serif); }
.mv-customise .cust-stone-heading > span { color: var(--mv-mute); font: 10px/1.5 var(--mv-mono); text-transform: uppercase; letter-spacing: .12em; }
.mv-customise .cust-stone-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: min(400px, 60vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #75694e #191814; }
.mv-customise .cust-stone-options::-webkit-scrollbar { width: 4px; }
.mv-customise .cust-stone-options::-webkit-scrollbar-track { background: #191814; }
.mv-customise .cust-stone-options::-webkit-scrollbar-thumb { background: #75694e; border-radius: 4px; }
.mv-customise .cust-stone-option { position: relative; display: block; margin: 0; min-width: 0; cursor: pointer; }
.mv-customise .cust-stone-option input[type="radio"] { position: absolute; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.mv-customise .cust-stone-choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 10px 12px; border: 1px solid rgba(230,207,163,.1); border-radius: 3px; background: #201f1a; transition: background .15s, border-color .15s; }
.mv-customise .cust-stone-name { font: 17px/1.3 var(--mv-serif); color: var(--mv-default); }
.mv-customise .cust-stone-option:hover .cust-stone-choice { border-color: rgba(230,207,163,.4); background: #29271f; }
.mv-customise .cust-stone-option input:checked + .cust-stone-choice { border-color: var(--mv-highlight); background: rgba(230,207,163,.09); }
.mv-customise .cust-stone-check { position: absolute; right: 7px; bottom: 5px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--mv-highlight); color: #191814; font: bold 11px/1 var(--mv-sans); opacity: 0; }
.mv-customise .cust-stone-option input:checked + .cust-stone-choice .cust-stone-check { opacity: 1; }
.mv-customise .cust-stone-option input:focus-visible + .cust-stone-choice, .mv-customise .cust-stone-picker summary:focus-visible { outline: 2px solid var(--mv-highlight); outline-offset: -3px; }
.mv-customise #cust-stone-label { font-family: var(--mv-mono); font-size: var(--mv-fs-meta); letter-spacing: var(--mv-ls-meta); text-transform: uppercase; color: var(--mv-mute); }
@media (max-width: 767px) {
  .mv-customise .cust-stone-panel { position: static; width: 100%; margin-top: 8px; padding: 12px; box-shadow: none; }
  .mv-customise .cust-stone-options { max-height: none; overflow: visible; gap: 6px; }
  .mv-customise .cust-stone-choice { padding: 8px; gap: 6px; }
  .mv-customise .cust-stone-name { font-size: 16px; }
  .mv-customise .cust-stone-choice .cust-stone-thumb, .mv-customise .cust-stone-choice .cust-stone-clear { width: 40px; height: 40px; flex-basis: 40px; }
}
@media (min-width: 900px) {
  .mv-customise .frm-fluent-form > fieldset {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
    column-gap: var(--mv-s10); row-gap: var(--mv-s6); align-items: start;
    grid-template-areas:
      "piece piece piece"
      "metal1 image stone1"
      "metal2 image stone2"
      "metal3 image stone3"
      "size width teeth"
      "engrave engrave engrave"
      "ref notes notes"
      "name region region"
      "email email email"
      "phone chk1 chk1"
      "phone chk2 chk2"
      "submit submit submit";
  }
  .mv-customise .frm-fluent-form > fieldset > .ff-el-group { margin-bottom: 0; }
  .mv-customise .frm-fluent-form [style="grid-area:piece"] { width: 100%; max-width: 460px; margin-inline: auto; text-align: center; }
  .cust-preview { align-self: stretch; margin: 0; }
}
/* Native OpenCart markup support; fields mirror the live WordPress form. */
.mv-custom-original .cust-path .mv-h3{margin:0}.mv-custom-original .cust-path p{margin-bottom:0}.mv-custom-original .cust-path .mv-body{font-size:19px}.mv-custom-original .cust-timeline__row{gap:16px}.mv-custom-original .cust-timeline__row>span:last-child{text-align:right;white-space:nowrap}.mv-custom-original #config{scroll-margin-top:72px}
.mv-customise .frm-fluent-form .ff-el-group{min-width:0}.mv-customise .frm-fluent-form label{font-weight:400}.mv-customise .frm-fluent-form select{min-height:48px}.mv-customise .frm-fluent-form .ff-el-input--label{min-height:20px}.mv-customise .ff-el-form-check-label{display:flex;gap:10px;align-items:start}.mv-customise .ff_t_c p{margin:0;font-size:14px}.mv-customise .ff_tc_checkbox{flex-shrink:0}.mv-customise .ff-screen-reader-element{display:block;margin-top:12px;width:100%;font-size:12px;color:var(--mv-mute)}.mv-customise .ff_upload_btn{display:none}.mv-customise .ff-el-form-check-label input{min-width:16px}
.mv-customise button[disabled]{opacity:.55;cursor:not-allowed}.mv-customise #mv-custom-form-status{grid-column:1/-1;font-size:11px;color:var(--mv-mute);margin:0}
@media(max-width:767px){.mv-custom-original .cust-hero{padding:30px 22px}.mv-custom-original .cust-hero .mv-h1{font-size:58px}.mv-custom-original .cust-hero .mv-lede{font-size:19px}.mv-custom-original .cust-timeline__row .mv-caps{font-size:9px}.mv-custom-original .cust-path{padding:26px 22px}.mv-custom-original .cust-path>div{gap:16px;flex-wrap:wrap}.mv-custom-original .cust-path .mv-h3{font-size:35px}.mv-custom-original .cust-path .mv-meta{font-size:9px}.mv-custom-original .cust-path .mv-btn{width:100%;min-height:48px}.mv-custom-original .cust-path>p:last-child{width:100%}.mv-customise .frm-fluent-form input:not([type=checkbox]):not([type=file]),.mv-customise .frm-fluent-form select,.mv-customise .frm-fluent-form textarea{font-size:16px!important}.mv-custom-original #config>.mv-h2{font-size:38px}}
.mv-customise .ff_file_upload_holder{position:relative;display:block;cursor:pointer}
.mv-customise .frm-fluent-form .ff_file_upload_holder input[type=file]{position:absolute;width:1px!important;height:1px;padding:0!important;margin:0;overflow:hidden;clip-path:inset(50%)}
.mv-customise .ff_file_upload_holder:focus-within{outline:2px solid var(--mv-highlight);outline-offset:4px}