/*
 * Austin Trim configurator.
 *
 * Built inside the active design "Austin Trim Woven":
 *   Sora headings, DM Sans body, both already loaded site wide.
 *   #B90004 is the ONLY accent. No second hue anywhere, including the
 *   savings track, which runs accentTint to accent to accentDeep.
 *   No card containers around sections. Hairline rules and space instead.
 *   Motion dial is 0.15, so nothing loops. Transitions fire on change only.
 *
 * Option tiles are interactive controls, not content cards: flat, hairline
 * bordered, no elevation. That keeps them inside the no-cards rule while
 * letting someone see what they are choosing.
 */

.at-cfg{
  --bg:#FFFFFF; --surface:#F4F4F7; --ink:#1E293B; --muted:#909098;
  --line:#E3E3E9; --accent:#B90004; --deep:#7A0003; --tint:#FDECEC;
  --xs:8px; --sm:14px; --md:24px; --lg:44px; --r:4px;
  font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.6;
  color:var(--ink); max-width:1180px; margin:0 auto;
}
.at-cfg *,.at-cfg *::before,.at-cfg *::after{box-sizing:border-box}
.at-cfg h2{font-family:"Sora",sans-serif;font-weight:700;font-size:32px;line-height:1.08;
  letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.at-cfg p.at-intro{margin:0 0 var(--md);color:var(--muted);font-size:16px;max-width:56ch}

.at-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
@media(max-width:960px){.at-grid{grid-template-columns:1fr;gap:var(--md)}}

/* ---- a question block ------------------------------------------------ */
.at-q{padding:var(--md) 0;border-top:1px solid var(--line)}
.at-q:first-of-type{border-top:0;padding-top:0}
.at-q-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sm);margin-bottom:var(--sm)}
.at-q-t{font-family:"Sora",sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
.at-q-n{font-size:13px;color:var(--muted)}

/* ---- icon tiles ------------------------------------------------------- */
.at-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px}
.at-cfg button.at-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:13px 13px 12px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;text-align:left;width:100%;
  font-family:"DM Sans",sans-serif;color:var(--ink);
  transition:border-color .15s ease,background-color .15s ease;
}
.at-cfg button.at-opt:hover{border-color:var(--muted)}
.at-cfg button.at-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.at-cfg button.at-opt.is-on{border-color:var(--accent);background:var(--tint);box-shadow:inset 0 0 0 1px var(--accent)}
.at-opt-ico{display:block;color:var(--muted);line-height:0}
.at-opt.is-on .at-opt-ico{color:var(--accent)}
.at-opt-ico svg{display:block;width:24px;height:24px}
/* A line glyph is an icon. A photograph of a finished edge is the thing
   itself, so it is given room to be read. Still a control, so it keeps the
   4px interactive radius rather than the 10px photographic one. */
.at-opt-ico img.at-ico-line{display:block;width:24px;height:24px}
.at-opt-ico img.at-ico-photo{display:block;width:100%;height:76px;object-fit:contain;
  border-radius:var(--r);background:var(--bg)}
.at-opt:has(img.at-ico-photo){padding-top:9px}
.at-opt-ico:has(img.at-ico-photo){width:100%}
.at-opt-t{font-size:14px;line-height:1.25;font-weight:500}
.at-opt-p{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.35}
.at-opt-money{display:block;font-weight:600;color:var(--ink);font-size:13px}
.at-opt.is-on .at-opt-money{color:var(--deep)}
.at-opt.is-on .at-opt-p{color:var(--deep)}
.at-opt-p.is-free{color:var(--muted)}

/* ---- size ------------------------------------------------------------- */
.at-size{display:flex;align-items:flex-end;gap:var(--sm);flex-wrap:wrap}
.at-dim{flex:0 0 128px}
.at-dim label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.at-x{font-size:18px;color:var(--muted);padding-bottom:11px}
.at-cfg input[type=number]{width:100%;padding:10px 12px;font-family:"DM Sans",sans-serif;
  font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r)}
.at-cfg input[type=number]:focus{outline:2px solid var(--accent);outline-offset:-1px}
.at-cfg input[type=range]{width:100%;accent-color:var(--accent)}

/* ---- quantity and the savings booster --------------------------------- */
.at-boost{padding:var(--md) 0;border-top:1px solid var(--line)}
.at-qty-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--md);flex-wrap:wrap;margin-bottom:var(--sm)}
.at-qty-in{flex:0 0 132px}
.at-qty-in label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.at-save-wrap{text-align:right;line-height:1}
.at-save{font-family:"Sora",sans-serif;font-weight:700;font-size:40px;letter-spacing:-.03em;
  color:var(--accent);font-variant-numeric:tabular-nums;transition:color .25s ease}
.at-save-l{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.at-boost.is-hot .at-save{color:var(--deep)}

.at-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--sm)}
.at-cfg button.at-pre{padding:7px 13px;font-family:"DM Sans",sans-serif;font-size:14px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .15s ease,background-color .15s ease}
.at-cfg button.at-pre:hover{border-color:var(--muted)}
.at-cfg button.at-pre.is-on{border-color:var(--accent);background:var(--tint);color:var(--deep);font-weight:500}

.at-track{position:relative;height:8px;border-radius:99px;background:var(--surface);overflow:hidden;margin:var(--sm) 0 0}
.at-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);border-radius:99px;
  background:linear-gradient(90deg,var(--tint) 0%,var(--accent) 60%,var(--deep) 100%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.at-marks{position:relative;height:20px;margin-top:6px}
.at-mark{position:absolute;top:0;transform:translateX(-50%);font-size:11px;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.at-mark i{display:block;width:1px;height:4px;background:var(--line);margin:0 auto 3px}
.at-mark.is-hit{color:var(--accent)}
.at-mark.is-hit i{background:var(--accent)}
.at-nudge{font-size:15px;line-height:1.5;margin-top:var(--xs)}
.at-nudge b{font-weight:700;color:var(--accent)}
.at-nudge.is-max b{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.at-fill,.at-save{transition:none}}

/* ---- price side -------------------------------------------------------- */
.at-side{position:sticky;top:24px}
.at-price{border-top:3px solid var(--accent);padding-top:var(--md)}
.at-unit{font-family:"Sora",sans-serif;font-weight:700;font-size:44px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.at-sub{font-size:14px;color:var(--muted);margin-top:7px}
.at-eta{font-size:14px;margin-top:var(--sm);padding-top:var(--sm);border-top:1px solid var(--line)}
.at-eta b{font-weight:700}

.at-lines{margin-top:var(--md);border-top:1px solid var(--line)}
.at-line{display:flex;justify-content:space-between;gap:var(--sm);padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.at-line .l{color:var(--ink)}
.at-line .n{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.at-line .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.at-line.is-free .v{color:var(--muted)}
.at-line.is-sum{border-bottom:0;border-top:1px solid var(--ink);margin-top:5px;padding-top:12px;
  font-family:"Sora",sans-serif;font-weight:700;font-size:18px}


.at-cfg button.at-btn{display:block;width:100%;margin-top:var(--md);padding:14px 18px;border:0;
  border-radius:var(--r);background:var(--accent);color:#fff;cursor:pointer;
  font-family:"Sora",sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.6px;
  text-transform:uppercase;transition:background-color .18s ease}
.at-cfg button.at-btn:hover{background:var(--ink)}
.at-cfg button.at-btn.is-2{margin-top:9px;background:transparent;color:var(--ink);border:1px solid var(--line)}
.at-cfg button.at-btn.is-2:hover{background:var(--surface);border-color:var(--muted)}
.at-foot{font-size:12.5px;color:var(--muted);margin-top:var(--sm);line-height:1.5}

/* ---- quote panel -------------------------------------------------------
   Sits inside the price column rather than as an overlay. A modal would
   hide the very figures the customer is deciding on. */
.at-quotebox{margin-top:var(--sm);padding-top:var(--sm);border-top:1px solid var(--line)}
.at-qb-t{font-family:"Sora",sans-serif;font-weight:700;font-size:15px;margin:0 0 4px;color:var(--ink)}
.at-qb-n{font-size:13px;color:var(--muted);margin:0 0 var(--sm);line-height:1.5}
.at-qb-l{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.at-cfg .at-quotebox input[type=email],.at-cfg .at-quotebox input[type=text]{
  width:100%;padding:10px 12px;font-family:"DM Sans",sans-serif;font-size:15px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.at-cfg .at-quotebox input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.at-cfg .at-quotebox input[readonly]{background:var(--surface);font-size:13px}
.at-qb-err{font-size:13px;color:var(--deep);margin:8px 0 0;min-height:1px}
.at-cfg button.at-qb-x{display:block;width:100%;margin-top:8px;padding:8px;border:0;background:none;
  font-family:"DM Sans",sans-serif;font-size:13px;color:var(--muted);cursor:pointer;text-decoration:underline}
.at-cfg button.at-qb-x:hover{color:var(--ink)}

.at-err{border-left:3px solid var(--accent);background:var(--tint);color:var(--deep);
  padding:11px var(--sm);font-size:15px;margin-bottom:var(--sm);border-radius:0 var(--r) var(--r) 0}
/* The price block never greys out. A 2px accent line above the figure is
   the only thing that moves, and only while a request is genuinely in
   flight. Under reduced motion it holds still and simply shows, so the
   state is still visible without anything animating. */
.at-wait{position:absolute;left:0;right:0;top:-3px;height:2px;overflow:hidden;opacity:0;
  transition:opacity .15s ease}
.at-wait.is-on{opacity:1}
.at-wait i{display:block;width:40%;height:100%;background:var(--accent);
  animation:at-wait-slide 1.1s ease-in-out infinite}
@keyframes at-wait-slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.at-price{position:relative}
@media(prefers-reduced-motion:reduce){
  .at-wait{transition:none}
  .at-wait i{animation:none;width:100%;opacity:.45}
}


@media(max-width:960px){
  .at-side{position:static;margin-top:var(--md);padding-top:var(--md);border-top:1px solid var(--line)}
  .at-cfg h2{font-size:26px}
  .at-unit{font-size:38px}
}


/* ======================================================================
   CHECKOUT: the artwork step
   Same design, same tokens. The drop zone and the route tiles are
   interactive controls rather than content, so a hairline border is
   right and a card is not.
   ====================================================================== */

.at-steps{display:flex;gap:var(--md);align-items:baseline;flex-wrap:wrap;
  padding-bottom:var(--sm);margin-bottom:var(--md);border-bottom:1px solid var(--line)}
.at-step{font-family:"Sora",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted)}
.at-step.is-done{color:var(--ink)}
.at-step.is-now{color:var(--accent);box-shadow:inset 0 -2px 0 0 var(--accent);padding-bottom:3px}

/* Route tiles carry a sentence of help, so they need more width than a
   backing or a border tile does. */
.at-co .at-opts{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.at-co .at-opt-p{line-height:1.45}
.at-cfg button.at-opt[disabled]{opacity:.55;cursor:default}

/* ---- drop zone -------------------------------------------------------- */
.at-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;min-height:118px;padding:var(--md) var(--sm);cursor:pointer;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r);background:var(--bg);
  transition:border-color .15s ease,background-color .15s ease}
.at-drop:hover{border-color:var(--muted)}
.at-drop:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.at-drop.is-over{border-color:var(--accent);border-style:solid;background:var(--tint)}
.at-drop-t{font-family:"Sora",sans-serif;font-weight:600;font-size:14.5px;color:var(--ink)}
.at-drop-n{font-size:12.5px;color:var(--muted)}
.at-drop-bar{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;opacity:0}
.at-drop-bar.is-on{opacity:1}
.at-drop-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);
  transform-origin:left center;transition:transform .15s linear}

/* ---- the files on the order ------------------------------------------- */
.at-files{margin-top:var(--sm)}
.at-files:empty{margin-top:0}
.at-f{display:flex;align-items:center;gap:var(--sm);padding:10px 0;border-bottom:1px solid var(--line)}
.at-f-thumb{flex:0 0 40px;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r);
  object-fit:contain;background:var(--surface)}
.at-f-thumb.is-doc{display:flex;align-items:center;justify-content:center;
  font-family:"Sora",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.4px;color:var(--muted)}
.at-f-body{flex:1 1 auto;min-width:0}
.at-cfg a.at-f-name{display:block;font-size:14.5px;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.at-cfg a.at-f-name:hover{color:var(--accent);text-decoration:underline}
.at-f-meta{display:block;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.at-cfg button.at-f-x{flex:0 0 auto;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);cursor:pointer;font-family:"DM Sans",sans-serif;font-size:12.5px;color:var(--muted);
  transition:border-color .15s ease,color .15s ease}
.at-cfg button.at-f-x:hover{border-color:var(--accent);color:var(--accent)}

/* ---- notes ------------------------------------------------------------ */
.at-note-h{font-size:13.5px;color:var(--muted);margin:0 0 var(--xs);line-height:1.55;max-width:60ch}
.at-cfg textarea.at-notes{width:100%;padding:11px 12px;font-family:"DM Sans",sans-serif;font-size:15px;
  line-height:1.6;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);resize:vertical}
.at-cfg textarea.at-notes:focus{outline:2px solid var(--accent);outline-offset:-1px}
.at-cfg textarea.at-notes[readonly]{background:var(--surface);color:var(--muted)}

.at-done{margin:var(--sm) 0 0;padding-top:var(--sm);border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.55;color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .at-drop,.at-drop-bar i,.at-cfg button.at-f-x{transition:none}
}

/* ---- checkout step two: your details ---------------------------------- */
.at-det{padding-top:var(--md);margin-top:var(--md);border-top:1px solid var(--line)}
.at-det h2{font-size:26px;margin-bottom:4px}
.at-flds{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:var(--sm)}
.at-fld{min-width:0}
.at-fld-wide{grid-column:1 / -1}
.at-fld label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.at-opt-note{color:var(--muted);font-size:11.5px}
.at-cfg .at-fld input,.at-cfg .at-fld select{width:100%;padding:10px 12px;font-family:"DM Sans",sans-serif;
  font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.at-cfg .at-fld input:focus,.at-cfg .at-fld select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.at-fld.is-bad input,.at-fld.is-bad select{border-color:var(--accent);background:var(--tint)}
.at-fld.is-bad label{color:var(--deep)}

/* ---- confirmation ------------------------------------------------------ */
.at-next{margin:0;padding-left:1.15em;font-size:15px;line-height:1.6;color:var(--ink)}
.at-next li{margin-bottom:6px}
.at-addr{font-size:15px;line-height:1.6;margin:0}
.at-step.is-off{opacity:.45}
.at-cfg a.at-btn-a{display:block;width:100%;margin-top:var(--md);padding:14px 18px;border:0;
  border-radius:var(--r);background:var(--accent);color:#fff;cursor:pointer;text-align:center;
  text-decoration:none;font-family:"Sora",sans-serif;font-weight:600;font-size:13.5px;
  letter-spacing:.6px;text-transform:uppercase;transition:background-color .18s ease}
.at-cfg a.at-btn-a:hover{background:var(--ink);color:#fff}

@media(prefers-reduced-motion:reduce){.at-cfg a.at-btn-a{transition:none}}

/* ---- the portal -------------------------------------------------------- */
.at-acc{max-width:920px}
.at-acc-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sm);flex-wrap:wrap}
.at-acc-who{font-size:13px;color:var(--muted);margin:0}
.at-cfg .at-acc-who a{color:var(--accent);text-decoration:none}
.at-cfg .at-acc-who a:hover{text-decoration:underline}
.at-back{font-size:13px;margin:0 0 var(--xs)}
.at-cfg .at-back a{color:var(--muted);text-decoration:none}
.at-cfg .at-back a:hover{color:var(--accent)}
.at-signin{max-width:520px;margin-top:var(--md)}
.at-cfg button.at-btn-inline{width:auto;padding:12px 26px;margin-top:var(--sm)}

/* An order list, separated by hairlines rather than boxed into cards. Three
   columns so the total sits under its own heading; the name and its detail
   are wrapped together or the grid would push the total onto a second row. */
.at-o-head,.at-o{display:grid;grid-template-columns:minmax(0,1fr) 168px 104px;gap:var(--sm);align-items:baseline}
.at-o-head{padding:0 0 7px;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);font-family:"Sora",sans-serif;font-weight:600;border-bottom:1px solid var(--line)}
.at-orders{list-style:none;margin:0;padding:0}
.at-o{padding:14px 0;border-bottom:1px solid var(--line)}
.at-orders li:last-child .at-o,.at-orders li:last-child{border-bottom:0}
.at-o-main{min-width:0}
.at-cfg a.at-o-name{display:block;font-family:"Sora",sans-serif;font-weight:600;font-size:15.5px;
  color:var(--ink);text-decoration:none}
.at-cfg a.at-o-name:hover{color:var(--accent)}
.at-o-meta{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.at-o-status{font-size:14px;color:var(--ink)}
.at-o-when{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.at-o-total{font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .at-o-head{display:none}
  .at-o{grid-template-columns:1fr auto;row-gap:4px}
  .at-o-main{grid-column:1 / -1}
  .at-o-total{text-align:left}
}
.at-claim{display:flex;align-items:center;justify-content:space-between;gap:var(--sm);
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}

.at-time{list-style:none;margin:0;padding:0}
.at-time li{display:flex;gap:var(--sm);padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.at-time li:last-child{border-bottom:0}
.at-time-w{flex:0 0 148px;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.at-time-t{flex:1 1 auto}
/* The note staff wrote for the customer, under the event it explains. */
.at-time-n{color:var(--muted);font-size:13px}

/* ---- from price -------------------------------------------------------- */
.at-from{padding:var(--md) 0;border-top:3px solid var(--accent);max-width:420px}
.at-from.is-inline{border-top:0;padding:0;max-width:none}
.at-from-l{display:block;font-family:"Sora",sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.at-from-n{display:block;font-family:"Sora",sans-serif;font-weight:700;font-size:40px;line-height:1.05;
  letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;margin:4px 0 5px}
.at-from-q{display:block;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:44ch}
.at-cfg a.at-from-go{display:inline-block;margin-top:var(--sm);font-family:"Sora",sans-serif;
  font-weight:600;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:border-color .15s ease}
.at-cfg a.at-from-go:hover{border-color:var(--accent)}

.at-from-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--md)}
.at-from-cell{padding-top:var(--sm);border-top:1px solid var(--line)}
.at-from-cell .at-from-n{font-size:30px}
.at-from-p{display:block;font-family:"Sora",sans-serif;font-weight:600;font-size:14px;color:var(--ink)}

@media(prefers-reduced-motion:reduce){.at-cfg a.at-from-go{transition:none}}

/* ---- the test plan sheet ----------------------------------------------
   A staging review aid. Same tokens as everything else so it reads as part
   of the system rather than a spreadsheet pasted onto the site. */
.at-tp{max-width:960px}
.at-tp-head{padding-bottom:var(--md);border-bottom:3px solid var(--accent)}
.at-tp-warn{font-size:13px;line-height:1.55;color:var(--deep);background:var(--tint);
  border-left:3px solid var(--accent);padding:10px var(--sm);margin:0;border-radius:0 var(--r) var(--r) 0}

.at-tp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sm)}
.at-cfg a.at-tp-cell{display:block;padding:var(--sm);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--ink);transition:border-color .15s ease,background-color .15s ease}
.at-cfg a.at-tp-cell:hover{border-color:var(--accent);background:var(--tint)}
.at-tp-p{display:block;font-family:"Sora",sans-serif;font-weight:600;font-size:14.5px;color:var(--ink)}
.at-tp-n{display:block;font-family:"Sora",sans-serif;font-weight:700;font-size:26px;line-height:1.1;
  letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums;margin:5px 0 2px}
.at-tp-q{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.at-tp-m{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;padding-top:6px;
  border-top:1px solid var(--line)}

.at-tp-steps{margin:0;padding-left:1.3em;font-size:15px;line-height:1.6}
.at-tp-steps li{margin-bottom:var(--sm);padding-bottom:var(--sm);border-bottom:1px solid var(--line)}
.at-tp-steps li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.at-tp-steps b{font-family:"Sora",sans-serif;font-weight:600}
.at-tp-note{display:block;font-size:13px;color:var(--muted);margin-top:5px}
.at-cfg .at-tp-steps a,.at-cfg .at-tp-list a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--line)}
.at-cfg .at-tp-steps a:hover,.at-cfg .at-tp-list a:hover{border-color:var(--accent)}

.at-tp-list{margin:0;padding-left:1.15em;font-size:14.5px;line-height:1.65}
.at-tp-list li{margin-bottom:7px}
.at-tp-list b{font-family:"Sora",sans-serif;font-weight:600}
.at-cfg .at-tp-list code{font-size:13px;background:var(--surface);padding:1px 5px;border-radius:3px}

.at-tp-orders{border-top:1px solid var(--line)}
.at-tp-o{display:grid;grid-template-columns:minmax(0,1fr) 140px 366px;gap:var(--sm);
  align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.at-tp-o-main{min-width:0}
.at-tp-o-ref{display:block;font-family:"Sora",sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.at-tp-o-meta{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.at-tp-o-state{font-size:13.5px}
.at-tp-o-who{display:block;font-size:11.5px;color:var(--muted)}
.at-tp-o-go{display:flex;gap:7px;row-gap:6px;flex-wrap:wrap;justify-content:flex-end}
.at-cfg .at-tp-o-go a{font-size:12.5px;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);padding:5px 8px;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease}
.at-cfg .at-tp-o-go a:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:860px){
  .at-tp-o{grid-template-columns:1fr;row-gap:7px}
  .at-tp-o-go{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .at-cfg a.at-tp-cell,.at-cfg .at-tp-o-go a{transition:none}
}

/* ---- step rail as real navigation ------------------------------------- */
.at-cfg a.at-step{text-decoration:none;transition:color .15s ease}
.at-cfg a.at-step:hover{color:var(--accent)}
.at-cfg a.at-step.is-done{color:var(--ink)}
.at-cfg a.at-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- the reassurance disclosure --------------------------------------- */
.at-pop{margin-top:var(--sm)}
.at-cfg button.at-pop-t{display:block;width:100%;padding:9px 12px;text-align:left;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  font-family:"DM Sans",sans-serif;font-size:13px;color:var(--ink);
  transition:border-color .15s ease,background-color .15s ease}
.at-cfg button.at-pop-t::after{content:"+";float:right;color:var(--muted);font-size:15px;line-height:1.2}
.at-cfg button.at-pop-t[aria-expanded="true"]::after{content:"\2212"}
.at-cfg button.at-pop-t:hover{border-color:var(--muted)}
.at-cfg button.at-pop-t[aria-expanded="true"]{border-color:var(--accent);background:var(--tint);color:var(--deep)}
.at-cfg button.at-pop-t:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.at-pop-b{padding:10px 12px 2px}
.at-pop-b p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .at-cfg a.at-step,.at-cfg button.at-pop-t{transition:none}
}

/* ---- concepts drawn from a description --------------------------------
   Selectable pictures, so they are the option tile pattern with the image
   doing the work. Flat and hairline bordered like every other control. */
.at-gens{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:var(--sm)}
.at-cfg button.at-gen{display:block;width:100%;padding:8px;cursor:pointer;text-align:center;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  font-family:"DM Sans",sans-serif;color:var(--ink);
  transition:border-color .15s ease,background-color .15s ease}
.at-cfg button.at-gen:hover{border-color:var(--muted)}
.at-cfg button.at-gen:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.at-cfg button.at-gen.is-on{border-color:var(--accent);background:var(--tint);
  box-shadow:inset 0 0 0 1px var(--accent)}
.at-cfg button.at-gen img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;
  border-radius:var(--r);background:var(--surface)}
.at-gen-t{display:block;margin-top:7px;font-size:12.5px;color:var(--muted);line-height:1.3}
.at-gen.is-on .at-gen-t{color:var(--deep);font-weight:500}

@media(prefers-reduced-motion:reduce){.at-cfg button.at-gen{transition:none}}

/* ---- the proof waiting for an answer -----------------------------------
   The only thing on the order the customer has to act on, so the accent
   rule marks it out. Still hairline, still no card. */
.at-proof{border-left:3px solid var(--accent);padding-left:var(--sm);margin-left:-1px}
.at-cfg a.at-proof-img{display:block;margin:var(--xs) 0 var(--sm);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--surface)}
.at-proof-img img{display:block;width:100%;height:auto}
.at-proof-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sm)}
.at-cfg .at-proof-act button.at-btn{width:auto;margin-top:0;padding:12px 22px}
.at-proof-changes{margin-top:var(--sm);padding-top:var(--sm);border-top:1px solid var(--line)}
.at-proof-changes label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.at-cfg .at-proof-changes button.at-btn{width:auto;margin-top:var(--sm);padding:11px 20px}

/* ---- the card step ------------------------------------------------------ */
.at-pay{margin-top:var(--md);padding-top:var(--md);border-top:1px solid var(--line)}
.at-mandate{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;
  color:var(--muted);margin-bottom:var(--sm)}
.at-cfg .at-mandate input{flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.at-card{margin:var(--sm) 0}


/* ======================================================================
   THEME OVERRIDES, last so they are easy to find
   Astra and the Elementor kit put a purple drop shadow on plain buttons
   and a grey one on inputs. Purple is not in this palette, and the design
   has no drop shadows at all. Everything starts flat; the one inset ring
   on a selected tile is more specific and still wins.
   ====================================================================== */
.at-cfg button,.at-cfg input,.at-cfg textarea,.at-cfg select,.at-cfg a{box-shadow:none}

/* ======================================================================
   The account strip. One quiet line, every plugin page: who is signed in
   and the way into their orders. Hairline underneath, no box, because the
   design has no cards and this is wayfinding, not content.
   ====================================================================== */
.at-me{display:flex;justify-content:flex-end;align-items:baseline;gap:var(--sm);
  padding:0 0 var(--xs);margin:0 0 var(--md);border-bottom:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.at-me a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 0 var(--line)}
.at-me a:hover{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent)}
.at-me-who{color:var(--muted)}

/* ======================================================================
   The journey rail. Seven milestones, dot and label, hairline connectors.
   Done is ink, now is the accent, the future is muted. is-yours marks the
   one moment the next move belongs to the customer, and it is the only
   place the rail raises its voice.
   ====================================================================== */
.at-journey{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--xs) 0;
  margin:0 0 var(--xs);padding:0}
.at-jstep{position:relative;font-family:"Sora",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  padding-left:16px;margin-right:var(--sm);white-space:nowrap}
.at-jstep::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg)}
.at-jstep.is-done{color:var(--ink)}
.at-jstep.is-done::before{border-color:var(--ink);background:var(--ink)}
.at-jstep.is-now{color:var(--accent)}
.at-jstep.is-now::before{border-color:var(--accent);background:var(--accent)}
.at-jstep.is-now.is-yours{box-shadow:inset 0 -2px 0 0 var(--accent);padding-bottom:2px}
.at-jhint{font-size:14.5px;color:var(--muted);margin:0 0 var(--md);max-width:56em}
.at-jhint.is-yours{color:var(--ink);font-weight:600}
.at-journey-hold{margin:0 0 var(--md);padding:10px 14px;border-left:3px solid var(--accent);
  background:var(--tint);font-size:14.5px;color:var(--ink)}
.at-jhold{font-family:"Sora",sans-serif;font-weight:700;font-size:12px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--accent);margin-right:8px}

/* ======================================================================
   The fabric swatch picker. Real photographed swatches, so the images do
   the talking: flat tiles, hairline borders, the accent only on selection.
   No shadows and no rounded cards, per the design.
   ====================================================================== */
.at-sw-picked{display:flex;flex-wrap:wrap;gap:var(--xs);margin:0 0 var(--sm)}
.at-sw-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:var(--r);padding:3px 8px 3px 3px;font-family:"DM Sans",sans-serif;font-size:13px;color:var(--ink)}
.at-sw-chip img{width:22px;height:22px;border-radius:2px;object-fit:cover;display:block}
.at-sw-chip button{border:0;background:none;color:var(--muted);font-size:15px;line-height:1;
  cursor:pointer;padding:0 2px}
.at-sw-chip button:hover{color:var(--accent)}
.at-sw-panel{margin-top:var(--sm);border-top:1px solid var(--line);padding-top:var(--sm)}
.at-sw-tabs{display:flex;align-items:center;gap:var(--sm);margin:0 0 var(--sm);flex-wrap:wrap}
.at-sw-tab{border:0;background:none;cursor:pointer;font-family:"Sora",sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:2px 0}
.at-sw-tab.is-on{color:var(--accent);box-shadow:inset 0 -2px 0 0 var(--accent);padding-bottom:3px}
.at-sw-find{margin-left:auto;border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;
  font-family:"DM Sans",sans-serif;font-size:13.5px;min-width:150px}
.at-sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:var(--xs);
  max-height:340px;overflow-y:auto;padding-right:2px}
.at-sw{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);cursor:pointer;
  padding:3px;display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:border-color .15s}
.at-sw img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;display:block}
.at-sw span{font-family:"DM Sans",sans-serif;font-size:11.5px;color:var(--ink)}
.at-sw:hover{border-color:var(--ink)}
.at-sw.is-on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.at-sw.is-on span{color:var(--accent);font-weight:600}