/* Phatsima Ring Enquiry, Code Grid IT. Tokens: every colour, font and size lives here */
.pjd-re{
  --pjd-black:#000000;
  --pjd-gold:#bd9b36;
  --pjd-on-accent:#000000;
  --pjd-light:#ebebeb;
  --pjd-white:#ffffff;
  --pjd-muted:#5f5a4e;
  --pjd-stone:#a9a49a;
  --pjd-border:#cfc9bb;
  --pjd-line:#e4e0d8;
  --pjd-selected-bg:#ffffff;
  --pjd-press-bg:#ffffff;
  --pjd-error:#b3261e;
  --pjd-error-bg:#ffffff;
  --pjd-focus-border:var(--pjd-gold);
  --pjd-focus-ring:0 0 0 3px rgba(189,155,54,.35);
  --pjd-display:Urbanist,"Helvetica Neue",Arial,sans-serif;
  --pjd-body:Urbanist,"Helvetica Neue",Arial,sans-serif;
  --pjd-fs-eyebrow:12px;
  --pjd-fs-label:13px;
  --pjd-fs-small:13px;
  --pjd-fs-body:16px;
  --pjd-fs-field:16px;
  --pjd-fs-h2:18px;
  --pjd-fs-h3:22px;
  --pjd-tap:44px;
  --pjd-radius-card:5px;
  --pjd-skeleton-a:#f3f3f3;
  --pjd-skeleton-b:#fafafa;
  --pjd-disabled:.4;
  container-type:inline-size;
  container-name:pjdre;
  background:var(--pjd-white);
  color:var(--pjd-black);
  font-family:var(--pjd-body);
  font-size:var(--pjd-fs-body);
  font-weight:300;
  line-height:1.7;
}
.pjd-re *,.pjd-re *::before,.pjd-re *::after{box-sizing:border-box}
.pjd-re__inner{max-width:1180px;margin:0 auto;padding:48px 24px}
.pjd-re__title{font-family:var(--pjd-display);font-weight:300;font-size:var(--pjd-fs-h2);line-height:1.15;margin:0 0 12px;color:var(--pjd-black)}
.pjd-re__title:focus{outline:none}
.pjd-re__subtitle{color:var(--pjd-muted);margin:0}
.pjd-re__progress{display:flex;gap:6px;margin:24px 0}
.pjd-re__progress span{height:3px;flex:1;background:var(--pjd-light)}
.pjd-re__progress span.is-done{background:var(--pjd-gold)}
.pjd-re__layout{display:grid;grid-template-columns:1fr;gap:24px;margin-top:8px}
.pjd-re__aside{background:var(--pjd-white);border:1px solid var(--pjd-line);border-top:3px solid var(--pjd-gold);padding:24px;align-self:start}
.pjd-re__aside-title{font-family:var(--pjd-display);font-weight:400;font-size:var(--pjd-fs-h3);margin:0 0 4px}
.pjd-re__note{font-size:var(--pjd-fs-small);color:var(--pjd-muted);margin:8px 0}

/* Option cards */
.pjd-re__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pjd-re__card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;padding:20px 12px;background:var(--pjd-white);border:1px solid var(--pjd-border);border-radius:var(--pjd-radius-card);color:var(--pjd-black);font-family:var(--pjd-body);font-size:var(--pjd-fs-body);font-weight:400;cursor:pointer;text-align:center}
.pjd-re__card:hover{border-color:var(--pjd-gold)}
.pjd-re__card:active{background:var(--pjd-press-bg)}
.pjd-re__card.is-selected{border:2px solid var(--pjd-gold);background:var(--pjd-selected-bg)}
.pjd-re__check{position:absolute;top:10px;right:10px;width:22px;height:22px;color:var(--pjd-gold);display:none}
.pjd-re__card.is-selected .pjd-re__check{display:block}
.pjd-re__art{height:90px;display:flex;align-items:center;justify-content:center}
.pjd-re__art svg{width:120px;max-height:90px}
.pjd-re__label{display:block;margin-top:10px}
.pjd-re__sublabel{display:block;font-size:var(--pjd-fs-small);color:var(--pjd-muted);line-height:1.4}
.pjd-re__art--photo{height:auto}
.pjd-re__photo{display:block;width:100%;max-width:200px;height:auto;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.pjd-re__advise{display:inline-flex;align-items:center;gap:8px;min-height:var(--pjd-tap);margin-top:12px;padding:0;background:none;border:0;color:var(--pjd-muted);font-family:var(--pjd-body);font-size:var(--pjd-fs-body);font-weight:400;text-decoration:underline;cursor:pointer}
.pjd-re__advise.is-selected{color:var(--pjd-black)}
.pjd-re__tick{width:18px;height:18px;flex:none;color:var(--pjd-gold)}

/* Buttons: Phatsima gold preset and dark outline */
.pjd-re__actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.pjd-re__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--pjd-tap);padding:12px 26px;font-family:var(--pjd-body);font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:1px solid var(--pjd-gold);background:var(--pjd-gold);color:var(--pjd-on-accent)}
.pjd-re__btn:hover{background:transparent;color:var(--pjd-black)}
.pjd-re__btn:disabled{opacity:var(--pjd-disabled);cursor:not-allowed}
.pjd-re__btn:disabled:hover{background:var(--pjd-gold);color:var(--pjd-on-accent)}
.pjd-re__btn--outline{background:transparent;border-color:var(--pjd-black);color:var(--pjd-black)}
.pjd-re__btn--outline:hover{background:var(--pjd-black);color:var(--pjd-white)}
.pjd-re__btn svg{width:16px;height:16px}

/* Summary rows: label left, value right, whole row opens the step */
.pjd-re__row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:var(--pjd-tap);padding:12px 0;border:0;border-bottom:1px solid var(--pjd-line);background:none;font-family:var(--pjd-body);font-size:var(--pjd-fs-small);color:var(--pjd-black);text-align:left}
.pjd-re__row-label{color:var(--pjd-muted);font-weight:400}
.pjd-re__row-end{display:flex;align-items:center;gap:8px;text-align:right;font-weight:400}
.pjd-re__row-end svg{width:14px;height:14px;color:var(--pjd-stone);flex:none}
button.pjd-re__row{cursor:pointer}
button.pjd-re__row:active{background:var(--pjd-press-bg)}
.pjd-re__row-empty{color:var(--pjd-stone)}

/* Fields */
.pjd-re__fields{display:grid;grid-template-columns:1fr;gap:18px}
.pjd-re__field{display:flex;flex-direction:column;gap:6px}
.pjd-re__field-label{font-size:var(--pjd-fs-label);font-weight:500;color:var(--pjd-black)}
.pjd-re__req{color:var(--pjd-error)}
.pjd-re__input{width:100%;min-height:var(--pjd-tap);padding:12px 14px;border:1px solid var(--pjd-border);border-radius:0;background:var(--pjd-white);color:var(--pjd-black);font-family:var(--pjd-body);font-size:var(--pjd-fs-field);font-weight:300}
textarea.pjd-re__input{min-height:120px;resize:vertical}
select.pjd-re__input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235f5a4e' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}
.pjd-re__input[aria-invalid="true"]{border-color:var(--pjd-error);background:var(--pjd-error-bg)}
.pjd-re__hint{font-size:var(--pjd-fs-small);color:var(--pjd-muted)}
.pjd-re__err{font-size:var(--pjd-fs-small);color:var(--pjd-error);font-weight:400}
.pjd-re__err:empty{display:none}
.pjd-re__consent{display:flex;align-items:flex-start;gap:12px;min-height:var(--pjd-tap);font-size:var(--pjd-fs-small);color:var(--pjd-black);cursor:pointer}
.pjd-re__consent input{flex:none;width:20px;height:20px;margin:2px 0 0;border:1px solid var(--pjd-border);background:var(--pjd-white);display:grid;place-content:center;cursor:pointer}
.pjd-re__consent input:checked{background:var(--pjd-gold);border-color:var(--pjd-gold)}
.pjd-re__consent input:checked::after{content:"";width:10px;height:6px;border-left:2px solid var(--pjd-on-accent);border-bottom:2px solid var(--pjd-on-accent);transform:rotate(-45deg) translate(1px,-1px)}
.pjd-re__consent input[aria-invalid="true"]{border-color:var(--pjd-error)}
.pjd-re__summary-err{border:1px solid var(--pjd-error);background:var(--pjd-error-bg);color:var(--pjd-error);padding:12px 14px;font-size:var(--pjd-fs-small);font-weight:400}
.pjd-re__summary-err:empty{display:none}
.pjd-re__intro{border-left:3px solid var(--pjd-gold);background:var(--pjd-selected-bg);padding:12px 16px;margin:0 0 20px;color:var(--pjd-muted)}
.pjd-re__next{border:1px solid var(--pjd-line);border-top:3px solid var(--pjd-gold);padding:20px;margin-bottom:24px;color:var(--pjd-muted)}
.pjd-re__next p{margin:8px 0 0}
.pjd-re__next-title{font-family:var(--pjd-display);font-weight:400;font-size:var(--pjd-fs-h3);margin:0;color:var(--pjd-black)}
.pjd-re__review{border:1px solid var(--pjd-line);padding:4px 20px;margin-bottom:24px}
.pjd-re__review .pjd-re__row:last-child{border-bottom:0}
.pjd-re__notice{border-left:3px solid var(--pjd-gold);background:var(--pjd-selected-bg);padding:12px 16px;font-size:var(--pjd-fs-small);color:var(--pjd-muted)}
.pjd-re__done h3{font-family:var(--pjd-display);font-weight:300;font-size:var(--pjd-fs-h3);margin:0 0 8px}
.pjd-re__done{border:1px solid var(--pjd-line);border-top:3px solid var(--pjd-gold);padding:24px}

/* Loading, alert, sending and sent states */
.pjd-re--done .pjd-re__aside{display:none}
.pjd-re__done p{margin:0}
.pjd-re__skeleton{display:block;min-height:150px;border-radius:var(--pjd-radius-card);background:linear-gradient(90deg,var(--pjd-skeleton-a),var(--pjd-skeleton-b),var(--pjd-skeleton-a));background-size:200% 100%;animation:pjd-re-shimmer 1.4s ease-in-out infinite}
@keyframes pjd-re-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.pjd-re__skeleton{animation:none}}
.pjd-re__alert{border:1px solid var(--pjd-error);border-left-width:3px;padding:12px 16px;margin:0 0 20px;color:var(--pjd-error);font-weight:400}
.pjd-re__alert strong{display:block;font-weight:500}
.pjd-re__btn[aria-busy="true"]{opacity:.7;cursor:progress}

/* Native field reset (Code Grid field standard), scoped to the form */
.pjd-re input,.pjd-re select,.pjd-re textarea,.pjd-re button{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;accent-color:var(--pjd-gold);color-scheme:light}
.pjd-re input:focus,.pjd-re select:focus,.pjd-re textarea:focus,.pjd-re button:focus{outline:none}
.pjd-re input:focus,.pjd-re select:focus,.pjd-re textarea:focus{border-color:var(--pjd-focus-border);box-shadow:var(--pjd-focus-ring)}
.pjd-re button:focus-visible{box-shadow:var(--pjd-focus-ring)}
.pjd-re input::-webkit-datetime-edit-day-field:focus,
.pjd-re input::-webkit-datetime-edit-month-field:focus,
.pjd-re input::-webkit-datetime-edit-year-field:focus{background:var(--pjd-light);color:var(--pjd-black);border-radius:3px}
.pjd-re input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--pjd-white) inset;-webkit-text-fill-color:var(--pjd-black)}
.pjd-re input::-webkit-outer-spin-button,.pjd-re input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Layout follows the space the form sits in, not only the screen */
@container pjdre (min-width:860px){
  .pjd-re__layout{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
  .pjd-re__fields--two{grid-template-columns:1fr 1fr}
  .pjd-re__field--full{grid-column:1/-1}
}
@container pjdre (max-width:420px){
  .pjd-re__inner{padding:32px 16px}
  .pjd-re__card{min-height:140px}
  .pjd-re__actions .pjd-re__btn{flex:1 1 auto}
}