/* ==========================================================================
   Emperor Sign — product configurator ("Personalize Your Home Signs")
   Layered on top of site.css: reuses --dark/--purple/--grad, the 4/8px
   spacing scale, --r-btn/--r-card radii and the Archivo/Poppins pairing.
   Only the pieces the configurator needs live here, so the shared
   stylesheet stays the size it is for every other page.
   ========================================================================== */

.pdp{padding-block:var(--section-y-tight) var(--section-y);}
.pdp__grid{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:var(--gutter-lg);align-items:start;}

/* ---------------- left column: live preview ---------------- */
.pdp__media{position:sticky;top:24px;display:flex;flex-direction:column;gap:var(--s-4);}

/* the sign is drawn, not photographed, so every option shows up instantly */
.stage{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-media);background:var(--surface-dark);
  display:grid;place-items:center;padding:var(--s-8);
  isolation:isolate;
}
.stage__bg{position:absolute;inset:0;background:var(--surface-dark) center/cover no-repeat;z-index:0;}
.stage__sign{
  position:relative;z-index:2;max-width:100%;text-align:center;
  color:#fff;
  /* same stack the tiles carry: Radiant supplies any numeral the chosen
     face lacks, instead of the browser's generic cursive */
  font-family:"Script MT Bold","Radiant",cursive;
  font-size:var(--sign-size,56px);line-height:1.15;
  overflow-wrap:anywhere;
  transition:color .25s ease,font-size .25s ease,text-shadow .25s ease;
}
/* a face swap is instant in the DOM; this gives the eye something to follow
   so the change registers as "my sign just changed" */
.stage__sign.is-changing{animation:signSettle .34s cubic-bezier(.2,.7,.3,1);}
@keyframes signSettle{
  from{opacity:.25;transform:translateY(4px) scale(.985);}
  to{opacity:1;transform:none;}
}
/* backlight: a halo behind the letters, tinted by the LED colour choice */
.stage.is-lit .stage__sign{
  text-shadow:
    0 0 6px var(--led,#fff),
    0 0 22px color-mix(in srgb,var(--led,#fff) 70%,transparent),
    0 0 60px color-mix(in srgb,var(--led,#fff) 45%,transparent);
}
.stage.is-lit::after{
  content:"";position:absolute;z-index:1;left:50%;top:50%;
  width:70%;aspect-ratio:2/1;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,color-mix(in srgb,var(--led,#fff) 26%,transparent),transparent 70%);
  pointer-events:none;
}
.stage__badge{
  position:absolute;z-index:3;left:16px;top:16px;
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:100px;
  background:rgba(20,19,22,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:rgba(255,255,255,.85);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.stage__badge b{font-weight:500;color:#fff;}
.stage__ruler{
  position:absolute;z-index:3;right:16px;bottom:16px;
  color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}

/* ---------------- right column: the form ---------------- */
.pdp__form{display:flex;flex-direction:column;}
/* the tool's own heading sits a step below the page title */
.pdp__title{font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--dark);}
.pdp__lead{margin-top:var(--s-2);max-width:var(--measure);color:var(--muted);line-height:var(--lh-body);}

.fields{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-8);border:0;padding:0;margin-inline:0;}
.field{display:flex;flex-direction:column;gap:var(--s-4);}
.field[hidden]{display:none;}
.field__label{
  font-family:var(--disp);font-size:20px;line-height:22px;letter-spacing:-.03em;
  color:var(--dark);text-transform:capitalize;
}
.field__label .req{color:var(--pink-700);}
.field__hint{font-size:14px;color:var(--muted);margin-top:-8px;}

/* free text — underline input, as on the reference */
.field__text{
  width:100%;padding:10px 0;font:400 18px var(--body);color:var(--dark);
  background:transparent;border:0;border-bottom:1px solid rgba(20,19,22,.14);
  transition:border-color .3s ease;
}
.field__text:focus{border-bottom-color:var(--purple-700);}
.field__text::placeholder{color:var(--muted);opacity:1;}
.field__count{font-size:13px;color:var(--muted);}

/* swatch grids ------------------------------------------------------------ */
.swatches{display:grid;gap:var(--s-2);}
.swatches--color{grid-template-columns:repeat(4,minmax(0,88px));}
.swatches--font{grid-template-columns:repeat(3,minmax(0,1fr));}
.swatches--size{grid-template-columns:repeat(2,minmax(0,1fr));}
.swatches--yn{grid-template-columns:repeat(2,minmax(0,160px));}
.swatches--led{grid-template-columns:repeat(2,minmax(0,180px));}
.swatches--bg{grid-template-columns:repeat(3,minmax(0,1fr));}

.swatch{position:relative;display:block;cursor:pointer;}
.swatch input{position:absolute;opacity:0;width:0;height:0;}
.swatch__box{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 10px;text-align:center;
  background:var(--white);border:3px solid var(--line);border-radius:var(--r-btn);
  color:var(--dark);font-size:15px;line-height:1.2;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.swatch:hover .swatch__box{border-color:#dcdbe0;}
.swatch input:checked + .swatch__box{border-color:var(--dark);}
.swatch input:focus-visible + .swatch__box{box-shadow:var(--ring-shadow);}

/* colour chips */
.swatch--color .swatch__box{height:64px;padding:6px;}
.swatch__chip{width:100%;height:100%;border-radius:var(--r-btn);border:1px solid var(--hairline-strong);}
.swatch--color .swatch__name{display:block;margin-top:6px;font-size:12px;color:var(--muted);text-align:center;}
/* font tiles render their own face, so the choice is the sample. Fixed height
   and no wrapping: the faces have wildly different metrics, and a tile that
   grew a second line would stretch its whole grid row. */
.swatch--font .swatch__box{height:64px;padding:12px 6px;white-space:nowrap;overflow:hidden;gap:6px;}
/* the word is the specimen, drawn in the face this tile selects */
.swatch__face{font-size:var(--tile,26px);line-height:1;}
/* the number stays in the interface font so it is legible on every tile —
   some of these faces have no numerals of their own */
.swatch__num{font:500 14px/1 var(--body);color:var(--muted);}
.swatch input:checked + .swatch__box .swatch__num{color:var(--dark);}
/* size and yes/no tiles */
.swatch--tile .swatch__box{flex-direction:column;gap:2px;padding:14px 12px;}
.swatch--tile .swatch__title{font-family:var(--disp);font-size:18px;letter-spacing:-.02em;}
/* background thumbnails — 4:3 like the source files, so each one shows
   whole rather than cropped to a letterbox */
.swatch--img .swatch__box{padding:0;overflow:hidden;height:auto;aspect-ratio:4/3;}
.swatch--img img{width:100%;height:100%;object-fit:cover;}

/* file drop zone ---------------------------------------------------------- */
.drop{
  position:relative;border:1px dashed var(--hairline-strong);border-radius:var(--r-btn);
  background:var(--white);min-height:120px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:var(--s-5);color:var(--text);
  transition:border-color .3s ease,background .3s ease;
}
.drop.is-over,.drop:hover{border-color:var(--purple-700);background:rgba(122,69,224,.06);}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.drop__hint{font-size:14px;color:var(--muted);}
.drop__file{display:none;align-items:center;gap:10px;font-size:14px;color:var(--dark);}
.drop.has-file .drop__file{display:flex;}
.drop.has-file .drop__idle{display:none;}
.drop__clear{
  position:relative;z-index:1;border:0;background:var(--light);color:var(--dark);
  border-radius:var(--r-pill);padding:6px 12px;min-height:28px;font:500 13px var(--body);cursor:pointer;
}
.drop__clear:hover{background:var(--line);}

/* quote action ------------------------------------------------------------ */
/* the totals block used to separate the options from the action — with no
   pricing on the page, a rule does that job */
.buybar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid rgba(20,19,22,.09);}
.buybar .btn{flex:0 0 auto;min-width:240px;padding-block:18px;}
.buynote{margin-top:var(--s-3);font-size:14px;color:var(--muted);}
.err{
  margin-top:var(--s-4);padding:12px 16px;border-radius:var(--r-btn);
  background:rgba(223,66,118,.08);border:1px solid rgba(223,66,118,.35);
  color:var(--danger);font-size:14px;
}
.err[hidden]{display:none;}
.field.is-invalid .field__label{color:var(--pink-700);}
.field.is-invalid .field__text{border-bottom-color:var(--pink-700);}

/* ---------------- order / contact section ---------------- */
.order__grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--gutter-lg);align-items:start;}
.spec{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);
  box-shadow:var(--shadow-1);
}
/* card-level heading: h2 for document order, sized as a card title */
.spec h2,.spec h3{font-family:var(--disp);font-size:var(--fs-h4);line-height:var(--lh-h4);
  letter-spacing:-.03em;text-transform:none;color:var(--dark);}
.spec dl{margin:0;display:flex;flex-direction:column;gap:var(--s-3);}
.spec__row{display:flex;justify-content:space-between;gap:var(--s-4);font-size:15px;}
.spec__row dt{color:var(--muted);}
.spec__row dd{margin:0;color:var(--dark);text-align:right;overflow-wrap:anywhere;}

/* the quote page's heading now lives in the page header; what is left here is
   the step heading on the business flow */
.order .form{max-width:none;margin:0;}
.order__submit{grid-column:1/-1;display:flex;justify-content:flex-end;}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  .pdp__grid,.order__grid{grid-template-columns:1fr;gap:var(--s-10);}
  /* the preview stays on screen while the options are chosen below it.
     It has to leave the grid to do that: a grid item's row ends where the
     item ends, so there is nothing for it to stick against. */
  .pdp__grid{display:block;}
  .pdp__media{
    position:sticky;top:8px;z-index:5;
    padding-block:var(--s-2);background:var(--light);margin-bottom:var(--s-8);
  }
  .pdp__media .stage{max-height:44vh;}
}
@media (max-width:620px){
  .swatches--font{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* two tiles to a phone row — scale the sample to the narrower box */
  .swatch--font .swatch__box{font-size:calc(var(--tile,26px) * .7);}
  .swatches--color{grid-template-columns:repeat(4,minmax(0,1fr));}
  .swatches--bg{grid-template-columns:repeat(2,minmax(0,1fr));}
  .swatches--yn,.swatches--led{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stage{padding:var(--s-5);}
  .buybar .btn{flex:1 1 100%;min-width:0;}
}
@media (prefers-reduced-motion:reduce){
  .stage__sign{transition:none;}
}

/* ==========================================================================
   business sign enquiry (business-signs.html)
   ========================================================================== */
.biz #bizForm{display:flex;flex-direction:column;gap:var(--s-12);}
.biz .field__label{display:flex;align-items:center;gap:var(--s-3);}
/* the numbered step marker in front of each field label.
   NOT .step — site.js claims that class for the How It Works accordion. */
.stepno{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:var(--r-pill);
  background:var(--dark);color:var(--white);
  font:500 14px/1 var(--body);
}
.logo-preview{
  margin:0;display:inline-flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-4);border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--light);align-self:flex-start;
}
.logo-preview img{max-width:220px;max-height:120px;object-fit:contain;}
.logo-preview figcaption{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}

/* categories — one block per heading, and every bullet block keeps its own
   column, exactly as the source list is grouped */
.cats{display:flex;flex-direction:column;gap:var(--s-8);}
.cat{padding:var(--s-6);border:1px solid var(--hairline);border-radius:var(--r-media);
  transition:border-color .2s ease;}
.cat__name{
  font-family:var(--disp);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:-.03em;text-transform:uppercase;color:var(--dark);
}
.cat__lead{margin-top:var(--s-3);max-width:var(--measure);color:var(--text);font-size:16px;line-height:var(--lh-body);}
.cat__groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:var(--s-5);}
/* a bullet block: its own column, divided from the next one */
.cat__group{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-4);border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--white);box-shadow:var(--shadow-1);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.cat__group.has-pick{border-color:var(--dark);box-shadow:var(--shadow-2);}
.cat__opts{display:flex;flex-direction:column;gap:var(--s-1);}
/* a radio cannot be un-picked by clicking it again, so each block that
   holds a choice grows its own way out */
.group-clear{
  align-self:flex-start;margin-top:var(--s-2);
  border:0;background:none;padding:6px 8px;margin-inline-start:-8px;min-height:28px;cursor:pointer;
  font:500 13px var(--body);color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;border-radius:var(--r-btn);
}
.group-clear:hover{color:var(--dark);}

/* one bullet = one radio */
.opt{display:block;cursor:pointer;}
.opt input{position:absolute;opacity:0;width:0;height:0;}
.opt__box{
  display:flex;align-items:center;gap:var(--s-3);
  padding:10px 12px;border-radius:var(--r-btn);
  font-size:15px;line-height:1.3;color:var(--text);
  transition:background .2s ease,color .2s ease;
}
.opt__dot{
  width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid rgba(20,19,22,.25);
  display:grid;place-items:center;
  transition:border-color .2s ease;
}
.opt__dot::after{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--purple);
  transform:scale(0);transition:transform .2s ease;
}
.opt:hover .opt__box{background:var(--light);}
.opt input:checked + .opt__box{background:var(--dark);color:var(--white);}
.opt input:checked + .opt__box .opt__dot{border-color:var(--white);}
.opt input:checked + .opt__box .opt__dot::after{transform:scale(1);background:var(--white);}
.opt input:focus-visible + .opt__box{box-shadow:var(--ring-shadow);}

/* the details step */
.linkish{
  border:0;background:none;padding:6px 8px;margin-inline:-8px;min-height:28px;cursor:pointer;
  font:inherit;color:var(--purple-700);text-decoration:underline;text-underline-offset:3px;
  border-radius:var(--r-btn);
}
.biz .buybar{margin-top:var(--s-6);}
.field.is-invalid .drop{border-color:var(--pink-700);background:rgba(223,66,118,.05);}
.field.is-invalid .cat{border-color:var(--pink-700);}

@media (max-width:1100px){
  .cat__groups{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .cat{padding:var(--s-5);}
  .cat__groups{grid-template-columns:1fr;gap:var(--s-5);}
  .cat__group{padding-left:var(--s-4);}
}

/* running tally of the picks, pinned above the list */
.chosen{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);border-radius:var(--r-card);
  background:var(--white);border:1px solid var(--hairline);box-shadow:var(--shadow-1);
}
.chosen__head{font-size:14px;color:var(--muted);}
.chosen__head b{color:var(--dark);}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2);flex:1;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 8px 6px 12px;border-radius:var(--r-pill);
  background:var(--dark);color:var(--white);font-size:14px;
}
.chip__x{
  width:24px;height:24px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);color:var(--white);
  font:400 16px/1 var(--body);display:grid;place-items:center;
}
.chip__x:hover{background:var(--pink-700);}

/* a completed step marks itself, so progress is legible at a glance */
.field.is-done .stepno{background:var(--purple-700);}
.field.is-done .stepno::after{content:"";}

/* per-field messages, right under the input that needs fixing */
.ferr{margin-top:6px;font-size:13px;color:var(--danger);}
.form .is-invalid input,.form .is-invalid textarea{border-color:var(--pink-700);background:rgba(223,66,118,.03);}
/* step 3 wears the quote page's own heading block */

/* the deliberate hand-off from the chooser to the quote page. It is a link,
   so it cannot carry :disabled — the class does the same job visually and
   business.js cancels the click while anything is missing. */
.btn.is-disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
.btn.is-disabled::before,.btn[aria-disabled="true"]::before{display:none;}
#continueHint{margin-top:0;}
.biz .buybar{align-items:center;gap:var(--s-4);}

/* the logo carried over from the business chooser */
.spec__logo{
  margin:0;padding:var(--s-4);border-radius:var(--r-btn);
  background:var(--light);display:grid;place-items:center;
}
.spec__logo img{max-width:100%;max-height:110px;object-fit:contain;}
.spec__row dd br + *{display:block;}