/* Calyn Cadeau — Direction A · Editorial Linen
   Recreated from the design handoff (Calyn Cadeau.dc.html) */

:root{
  --display: 'Cormorant Garamond', serif;
  --body: 'Jost', sans-serif;
  --accent: #C7A06A;           /* design-doc default accent */
  --ink: #2B2520;
  --paper: #F2ECE0;
  --panel: #FBF7EF;
  --muted: #9a8f80;
  --muted-2: #6F665B;
  --desc: #5f574c;
}

*{ box-sizing: border-box; }

/* the `hidden` attribute must always win, even over display:grid/flex rules */
[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ -webkit-user-drag: none; user-select: none; }

/* Centered "screen" — mirrors the 1280px design frame */
.screen{
  max-width: 1280px;
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
}

h1,h2{ margin: 0; }

.eyebrow{
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.btn-solid{
  background: var(--ink);
  color: var(--paper);
  padding: 16px 32px;
  border: none;
}
.btn-solid:hover{ opacity: .88; }
.btn-underline{
  padding: 16px 4px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  align-self: center;
}
.btn-underline:hover{ opacity: .7; }

/* ---------- Header ---------- */
.site-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 64px;
  border-bottom: 1px solid rgba(43,37,32,.10);
}
.brand{
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: .3em;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.nav{
  display: flex;
  gap: 38px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.nav a{ color: inherit; text-decoration: none; transition: color .2s ease; }
.nav a:hover{ color: var(--ink); }

/* ---------- Hero ---------- */
.hero{
  text-align: center;
  padding: 86px 64px 52px;
}
.hero .eyebrow{ margin-bottom: 26px; }
.hero-title{
  font-family: var(--display);
  font-weight: 300;
  font-size: 86px;
  line-height: .97;
  letter-spacing: -.01em;
}
.hero-sub{
  max-width: 500px;
  margin: 30px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-2);
}
.hero-actions{
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 36px;
}

/* ---------- Hero image ---------- */
.hero-media{ padding: 0 64px; }
.hero-media-frame{ position: relative; }
.hero-media-frame img{
  width: 100%;
  display: block;
  border-radius: 2px;
}

/* ---------- Section heads ---------- */
.section-head{ text-align: center; margin-bottom: 48px; }
.section-head .eyebrow{ margin-bottom: 18px; }
.section-title{
  font-family: var(--display);
  font-weight: 300;
  font-size: 54px;
  line-height: 1;
}

/* ---------- 01 The Studio / configurator ---------- */
.studio{ padding: 98px 64px 30px; }
.configurator{
  display: grid;
  /* minmax(0,…) lets the columns shrink below the wallet's fixed 366px width
     on narrow screens instead of forcing the controls column off-canvas */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 58px;
  align-items: center;
  background: var(--panel);
  border: 1px solid rgba(43,37,32,.08);
  border-radius: 3px;
  padding: 58px;
}
.stage{
  display: flex;
  justify-content: center;
  padding: 24px 0;
  background: radial-gradient(58% 46% at 50% 82%, rgba(43,37,32,.12), rgba(43,37,32,0) 72%);
}
.wallet-mount{ display: flex; justify-content: center; }

.control-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(43,37,32,.12);
  padding-bottom: 12px;
}
.control-label{
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.color-name{ font-family: var(--display); font-size: 25px; }

.swatches{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 22px 0 32px;
}
.swatch{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .2s ease;
}
.swatch:hover{ transform: translateY(-1px); }
.swatch .ring{
  position: absolute;
  inset: -6px;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.field-label{
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 11px;
}

.seg{ display: flex; gap: 8px; margin-bottom: 26px; }
.seg-wrap{ flex-wrap: wrap; margin-bottom: 24px; }
.seg-btn{
  padding: 9px 13px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
  font-family: var(--body);
  line-height: 1.1;
  background: transparent;
  color: var(--muted-2);
  border-color: rgba(43,37,32,.22);
}
.seg-btn:hover{ border-color: rgba(43,37,32,.4); }
.seg-btn.active{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pers-fields[hidden]{ display: none; }

.name-input{
  width: 100%;
  background: transparent;
  border: 1px solid rgba(43,37,32,.22);
  border-radius: 2px;
  padding: 15px 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .04em;
}
.name-input:focus{ outline: none; border-color: rgba(43,37,32,.5); }
.name-input::placeholder{ color: #a89e90; }
.helper{ font-size: 12px; color: var(--muted); margin-top: 10px; }

.purchase{
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(43,37,32,.12);
}
.price-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.price{ font-family: var(--display); font-size: 31px; }
.price-note{ font-size: 12px; color: var(--muted); }
.buy-row{ display: flex; align-items: stretch; gap: 12px; }
.qty{
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(43,37,32,.22);
  border-radius: 2px;
  padding: 0 16px;
}
.qty-btn{ cursor: pointer; font-size: 17px; color: var(--muted-2); user-select: none; }
.qty-btn:hover{ color: var(--ink); }
.qty-val{ font-size: 14px; min-width: 12px; text-align: center; }
.add-to-cart{
  flex: 1;
  text-align: center;
  padding: 15px 18px;
  font-size: 11px;
}

/* ---------- Description / Specs ---------- */
.specs{ padding: 6px 64px 36px; }
.specs-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  border-top: 1px solid rgba(43,37,32,.12);
  padding-top: 46px;
}
.meta-label{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.desc{ font-size: 15px; line-height: 1.8; color: var(--desc); margin: 0 0 18px; }
.desc-list{ display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--desc); }
.spec-table{ display: flex; flex-direction: column; }
.spec-row{
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(43,37,32,.1);
}
.spec-row.no-border{ border-bottom: none; }
.spec-k{ color: var(--muted); font-size: 13.5px; }
.spec-v{ font-size: 14px; }

/* ---------- 02 The Range ---------- */
.range{ padding: 74px 64px 98px; }
.range-img{ width: 100%; display: block; border-radius: 2px; }
.range-names{
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- 03 The Craft ---------- */
.craft{ background: #ECE4D6; padding: 98px 64px; }
.craft-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: center;
}
.craft-grid video{ width: 100%; display: block; border-radius: 2px; }
.block-title{
  font-family: var(--display);
  font-weight: 300;
  font-size: 50px;
  line-height: 1.02;
  margin: 0 0 22px;
}
.craft .block-title{ margin-top: 20px; }
.block-text{
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted-2);
  max-width: 420px;
}
.stats{ display: flex; gap: 40px; margin-top: 34px; font-size: 13px; color: var(--muted-2); }
.stat-num{ font-family: var(--display); font-size: 30px; color: var(--ink); }

/* ---------- 04 The Detail ---------- */
.detail{ padding: 98px 64px; }
.detail-grid{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 58px;
  align-items: center;
}
.detail .block-title{ margin-top: 20px; }
.detail .block-text{ max-width: 380px; }
.detail-grid img{ width: 100%; display: block; border-radius: 2px; }

/* ---------- 05 The Gift ---------- */
.gift{ padding: 0 64px 98px; }
.gift-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 58px;
  align-items: center;
}
.gift-grid img{ width: 100%; display: block; border-radius: 2px; }
.gift .block-title{ margin-top: 20px; }
.gift .block-text{ max-width: 360px; }
.gift-cta{ margin-top: 30px; padding: 15px 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: #E9E1D5; padding: 70px 64px 48px; }
.footer-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(233,225,213,.16);
  padding-bottom: 40px;
}
.footer-brand{
  font-family: var(--display);
  font-size: 38px;
  font-weight: 300;
  letter-spacing: .04em;
}
.footer-nav{
  display: flex;
  gap: 34px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #bdb3a4;
}
.footer-bottom{
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
}

/* ---------- Toast ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--paper);
  padding: 14px 24px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(30,16,8,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 50;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero-title{ font-size: 66px; }
  .section-title{ font-size: 44px; }
  .block-title{ font-size: 40px; }
  .site-header,.hero,.hero-media,.studio,.specs,.range,.craft,.detail,.gift,.site-footer{ padding-left: 40px; padding-right: 40px; }
  .configurator{ padding: 40px; gap: 40px; }
}

@media (max-width: 820px){
  .nav{ display: none; }
  .specs-grid,
  .craft-grid,
  .detail-grid,
  .gift-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .configurator{
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* keep image-left / text-right reading order sensible on stack */
  .detail-grid img{ order: -1; }
  .hero-title{ font-size: 54px; }
}

@media (max-width: 560px){
  .site-header,.hero,.hero-media,.studio,.specs,.range,.craft,.detail,.gift,.site-footer{ padding-left: 22px; padding-right: 22px; }
  .site-header{ padding-top: 20px; padding-bottom: 20px; }
  .hero{ padding-top: 56px; padding-bottom: 40px; }
  .hero-title{ font-size: 42px; }
  .hero-actions{ flex-direction: column; align-items: center; gap: 14px; }
  .section-title{ font-size: 36px; }
  .block-title{ font-size: 34px; }
  .studio{ padding-top: 64px; }
  .configurator{ padding: 26px; }
  .range-names{ font-size: 10px; letter-spacing: .1em; }
  .footer-top{ flex-direction: column; align-items: flex-start; gap: 22px; }
  .footer-nav{ gap: 22px; }
  .footer-bottom{ flex-direction: column; gap: 8px; }
  /* scale the fixed-size wallet down to fit narrow screens */
  .wallet-mount{ transform: scale(.78); transform-origin: center; height: 184px; }
}

@media (max-width: 380px){
  .wallet-mount{ transform: scale(.66); height: 156px; }
}

/* =========================================================
   Checkout — delivery + payment
   ========================================================= */
.checkout-secure{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkout-secure .lock{ font-size: 13px; }

.checkout-steps{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 64px 0;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkout-steps .step{ color: var(--muted); text-decoration: none; }
.checkout-steps a.step:hover{ color: var(--ink); }
.checkout-steps .step.current{ color: var(--ink); }
.checkout-steps .step-sep{ color: rgba(43,37,32,.3); }

.checkout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 58px;
  align-items: start;
  padding: 40px 64px 90px;
}
.checkout-main{ display: flex; flex-direction: column; gap: 30px; }

.co-block{
  background: var(--panel);
  border: 1px solid rgba(43,37,32,.08);
  border-radius: 3px;
  padding: 40px;
}
.co-block-head{ display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.co-num{
  font-family: var(--display);
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
}
.co-title{ font-family: var(--display); font-weight: 300; font-size: 34px; line-height: 1; }
.co-subhead{
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 14px;
}
.co-subhead:first-of-type{ margin-top: 0; }
.co-demo-note{
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-2);
  background: rgba(199,160,106,.12);
  border: 1px solid rgba(199,160,106,.34);
  border-radius: 2px;
  padding: 12px 14px;
  margin: 0 0 8px;
}
.co-hint{ font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.6; }

.co-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.co-grid-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }

/* fields */
.field{ display: flex; flex-direction: column; margin-bottom: 16px; position: relative; }
.field-lbl{
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.field-lbl em{ font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.field input,
.field select{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(43,37,32,.22);
  border-radius: 2px;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .02em;
}
.field input::placeholder{ color: #b3a797; }
.field input:focus,
.field select:focus{ outline: none; border-color: rgba(43,37,32,.55); }
.field input[readonly]{ background: rgba(43,37,32,.04); color: var(--muted-2); }
.field select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236F665B' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.field .err{ font-size: 11.5px; color: #b3402e; margin-top: 6px; min-height: 0; }
.field.has-err input,
.field.has-err select{ border-color: #c0553f; }
.card-brand{
  position: absolute; right: 14px; top: 35px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}

.checkrow{
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--muted-2); cursor: pointer; margin-top: 6px;
}
.checkrow input{ width: 16px; height: 16px; accent-color: var(--ink); }

/* radio option rows (delivery / e-wallet) */
.opt-list{ display: flex; flex-direction: column; gap: 10px; }
.opt{
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(43,37,32,.22);
  border-radius: 2px;
  padding: 15px 16px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.opt:hover{ border-color: rgba(43,37,32,.45); }
.opt.selected{ border-color: var(--ink); background: rgba(43,37,32,.03); }
.opt input{ width: 16px; height: 16px; accent-color: var(--ink); flex: 0 0 auto; }
.opt-body{ display: flex; flex-direction: column; gap: 3px; flex: 1; }
.opt-name{ font-size: 14.5px; color: var(--ink); }
.opt-desc{ font-size: 12.5px; color: var(--muted); }
.opt-price{ font-family: var(--display); font-size: 19px; color: var(--ink); }

.pay-tabs{ margin-bottom: 22px; flex-wrap: wrap; }
.pay-pane{ animation: fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: none; } }

/* summary */
.checkout-aside{ position: sticky; top: 24px; }
.summary{
  background: var(--panel);
  border: 1px solid rgba(43,37,32,.10);
  border-radius: 3px;
  padding: 30px;
}
.summary-head{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.summary-item{ display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.summary-preview{
  width: 150px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 8px;
}
#summaryWallet, #confWallet{ transform: scale(.41); transform-origin: center; flex: 0 0 auto; }
.summary-item-info{ min-width: 0; }
.summary-name{ font-size: 14px; color: var(--ink); line-height: 1.35; }
.summary-meta{ font-size: 12.5px; color: var(--muted-2); margin-top: 5px; line-height: 1.4; }
.summary-qty{ font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.summary-line-price{ font-family: var(--display); font-size: 18px; color: var(--ink); align-self: start; }

.summary-rows{
  border-top: 1px solid rgba(43,37,32,.12);
  margin-top: 24px; padding-top: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.summary-row{ display: flex; justify-content: space-between; font-size: 14px; color: var(--muted-2); }
.summary-row span:last-child{ color: var(--ink); }
.summary-row.total{
  border-top: 1px solid rgba(43,37,32,.12);
  margin-top: 6px; padding-top: 16px;
  font-size: 15px; color: var(--ink);
}
.summary-row.total span:first-child{ letter-spacing: .04em; }
.summary-row.total span:last-child{ font-family: var(--display); font-size: 24px; }

.place-order{ width: 100%; border: none; margin-top: 24px; padding: 17px 18px; font-size: 11.5px; }
.place-order:disabled{ opacity: .7; cursor: default; }
.summary-back{
  display: block; text-align: center; margin-top: 16px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); text-decoration: none;
}
.summary-back:hover{ color: var(--ink); }

/* =========================================================
   Order confirmation
   ========================================================= */
.confirmed{ padding: 30px 64px 90px; }
.confirmed-hero{ text-align: center; padding: 50px 0 56px; }
.confirmed-mark{
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); font-size: 28px;
}
.confirmed-hero .eyebrow{ margin-bottom: 18px; }
.confirmed-title{ font-family: var(--display); font-weight: 300; font-size: 60px; line-height: 1; }
.confirmed-sub{ max-width: 460px; margin: 22px auto 0; font-size: 15.5px; line-height: 1.75; color: var(--muted-2); }
.confirmed-sub strong{ color: var(--ink); font-weight: 400; }
.confirmed-orderno{
  margin-top: 22px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.confirmed-orderno span{ color: var(--ink); }

.confirmed-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 920px; margin: 0 auto; }
.conf-card{
  background: var(--panel);
  border: 1px solid rgba(43,37,32,.10);
  border-radius: 3px;
  padding: 30px;
}
.conf-item{ margin-top: 14px; }
.conf-block{ font-size: 14px; line-height: 1.7; color: var(--ink); }
.conf-block div{ color: var(--muted-2); }
.conf-block div:first-child{ color: var(--ink); }
.conf-est{ margin-top: 16px; font-size: 13.5px; line-height: 1.7; color: var(--muted-2); }
.conf-est strong{ color: var(--ink); font-weight: 400; }
.conf-paid{ font-family: var(--display); font-size: 19px; color: var(--ink); margin-top: 6px; }
.confirmed-actions{ text-align: center; margin-top: 44px; }

/* checkout responsive */
@media (max-width: 1024px){
  .checkout, .checkout-steps, .confirmed{ padding-left: 40px; padding-right: 40px; }
  .checkout{ grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; }
}
@media (max-width: 880px){
  .checkout{ grid-template-columns: minmax(0, 1fr); }
  .checkout-aside{ position: static; }
  .confirmed-grid{ grid-template-columns: 1fr; }
  .confirmed-title{ font-size: 46px; }
}
@media (max-width: 560px){
  .checkout, .checkout-steps, .confirmed{ padding-left: 22px; padding-right: 22px; }
  .co-block{ padding: 26px; }
  .co-grid-2, .co-grid-3{ grid-template-columns: 1fr; gap: 0; }
  .co-title{ font-size: 28px; }
  .summary-item{ grid-template-columns: auto 1fr; }
  .summary-line-price{ grid-column: 2; }
  .confirmed-title{ font-size: 38px; }
}

/* Billplz payment panel */
.billplz-panel{
  border: 1px solid rgba(43,37,32,.16);
  border-radius: 3px;
  padding: 24px;
  background: #fff;
}
.billplz-row{ display: flex; gap: 18px; align-items: flex-start; }
.billplz-badge{
  flex: 0 0 auto;
  background: #0a8f4d;
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 6px;
  text-transform: lowercase;
}
.billplz-copy{ min-width: 0; }
.billplz-title{ font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.billplz-copy p{ margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted-2); }
.billplz-methods{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(43,37,32,.10);
}
.billplz-methods span{
  font-size: 11px; letter-spacing: .06em; color: var(--muted-2);
  border: 1px solid rgba(43,37,32,.18); border-radius: 2px;
  padding: 6px 10px; white-space: nowrap;
}
#payModeNote{ margin-top: 18px; }

/* failed-payment mark */
.confirmed-mark.failed{ background: #c0553f; }