/* Shared Hymattz tokens; compact rows follow the Pricing comparison table. */
.quote-select { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--c-red); color: var(--c-light); font: inherit; font-size: var(--t-md); line-height: 1; cursor: pointer; }
.quote-select::before { content: ""; position: absolute; inset: -10px -4px; }
.quote-select:hover { filter: brightness(1.15); }
.plan__cta[aria-pressed="true"] { background: var(--c-red); color: var(--c-light); box-shadow: none; }
button.plan__cta { width: 100%; border: 0; font: inherit; cursor: pointer; }
.menu__price-actions { display: flex; gap: var(--s-2); align-items: center; justify-content: flex-end; }
.menu__list, .menu__list li, .menu__row { grid-template-columns: minmax(0, 1fr) 8em calc(var(--menu-price-col, 260px) + 30px); }
#priceTabs .price-selection { margin-left: auto; gap: var(--s-4); flex-wrap: wrap; justify-content: flex-end; }
.price-selection #priceCount { white-space: nowrap; }
#priceNote:empty { display: none; }
.price-selection .quote-dock { padding-left: var(--s-4); border-left: 1px solid var(--c-line); }
.quote-dock { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-text); font-size: var(--t-sm); text-decoration: none; white-space: nowrap; }
.quote-dock svg { width: 18px; height: 18px; flex: none; }
.quote-dock__count { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.quote-dock strong { font-size: var(--t-sm); font-weight: 500; }
.quote-dock__arrow { color: var(--c-muted); }
.quote-dock:hover .quote-dock__arrow { color: var(--c-red); }
.quote-toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; width: max-content; max-width: calc(100vw - 32px); padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-card); color: var(--c-text); font-size: var(--t-sm); }
.quote-toast[hidden], .quote-request[hidden] { display: none; }
.quote-page { padding-bottom: var(--s-9); }
.quote-section-head, .quote-summary-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.quote-summary-top { padding: 0 var(--gutter) var(--s-5); }
.quote-summary-top p { color: var(--c-muted); }
.quote-section-head h2 { font-size: var(--t-num); font-weight: 600; line-height: var(--lh-tight); margin: 0; }
.custom-pack { padding: var(--s-6) var(--gutter) var(--s-7); }
.custom-tools { display: flex; align-items: center; gap: var(--s-4); }
.custom-tools .quote-link { padding: 0; text-decoration: none; }
.custom-reset { padding: 0; width: 28px; height: 28px; border: 0; background: transparent; color: var(--c-muted); font: inherit; font-size: var(--t-lg); cursor: pointer; }
/* One 12-column grid: catalogue 8 / summary 4; 16px gutters matching Pricing plan cards. */
.custom-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); align-items: stretch; }
.custom-main { grid-column: span 8; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-4); min-width: 0; }
.custom-controls { display: grid; gap: var(--s-4); align-items: stretch; }
.custom-controls__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.custom-summary__price, .custom-summary__analytics { min-width: 0; }
.custom-summary__analytics { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; }
.custom-controls, .quote-items { min-width: 0; }
.custom-mode { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; }
.custom-mode button { padding: 6px var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-muted); background: transparent; font: inherit; font-size: var(--t-sm); cursor: pointer; }
.custom-mode button[aria-pressed="true"] { color: var(--c-ink); background: var(--c-light); border-color: var(--c-light); }
.custom-mode > span { margin-left: auto; color: var(--c-muted); font-size: var(--t-sm); }
.custom-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); min-width: 0; }
.custom-metric { min-width: 0; padding: var(--s-5); border-radius: var(--r-lg); background: var(--c-surface); }
.custom-metric + .custom-metric { border: 0; }
.custom-metric__label { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-sm); color: var(--c-muted); }
.custom-metric__label svg { width: 18px; height: 18px; }
.custom-metric > div { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); }
.custom-metric strong { font-size: var(--t-num); font-weight: 600; font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.custom-metric > div > span { font-size: var(--t-sm); color: var(--c-muted); }
.custom-summary { grid-column: span 4; display: flex; flex-direction: column; position: static; align-self: stretch; min-width: 0; padding: var(--s-5); border: 0; border-radius: var(--r-lg); background: var(--c-surface); }
.custom-mix { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px dotted var(--c-pill-line); margin-top: var(--s-5); }
.custom-mix > svg { display: block; width: 128px; height: 128px; margin: 0 auto; overflow: visible; }
.custom-mix__count { font-family: var(--f-sans); font-size: var(--t-num); font-weight: 600; fill: var(--c-text); }
.custom-mix__label { font-family: var(--f-sans); font-size: var(--t-sm); fill: var(--c-muted); }
.custom-mix__legend { display: grid; gap: var(--s-1); }
.custom-mix__title { display: block; grid-column: 1 / -1; font-size: var(--t-sm); color: var(--c-muted); margin: 0; }
.custom-mix__empty { margin: var(--s-2) 0; color: var(--c-muted); font-size: var(--t-sm); text-align: center; }
.custom-mix__row > span:nth-child(2) small { display: inline; margin-left: var(--s-2); }
.custom-mix__row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline; width: 100%; min-width: 0; padding: var(--s-1) 0; border: 0; background: transparent; color: var(--c-text); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.custom-mix__row small { display: block; color: var(--c-muted); font-size: var(--t-sm); font-weight: 400; }
.custom-mix__row strong { font-weight: 500; text-align: right; }
.custom-mix__row strong small { display: inline; margin-left: 2px; }
.custom-mix__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mix-color); }
.custom-mix__row:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: 4px; }
.custom-service.is-selected .custom-stepper { border-color: color-mix(in srgb, var(--c-red) 65%, var(--c-line)); }
.custom-pack button:focus-visible, .custom-group h3:focus-visible { outline: 2px solid var(--c-text); outline-offset: 4px; }
.custom-group { display: grid; grid-template-rows: 40px; grid-auto-rows: minmax(88px, auto); align-content: start; min-width: 0; padding: var(--s-5); border: 0; border-radius: var(--r-lg); background: var(--c-surface); scroll-margin-top: 110px; }
.custom-group h3 { min-width: 0; font-size: var(--t-sm); font-weight: 600; color: var(--c-text); margin: 0; }
.custom-group__head { display: flex; align-items: center; gap: var(--s-2); min-height: 40px; margin-bottom: 0; }
.custom-group__icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--c-muted); flex: none; }
.custom-group__icon svg { width: 20px; height: 20px; }
.has-selection .custom-group__icon { color: var(--c-red); }
.custom-group__total { margin-left: auto; color: var(--c-muted); font-size: var(--t-sm); white-space: nowrap; }
.has-selection .custom-group__total { color: var(--c-text); }
.custom-service { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; column-gap: var(--s-4); min-height: 88px; padding: var(--s-4) 0; border-top: 1px dotted var(--c-pill-line); }
.custom-service__label { min-width: 0; }
.custom-service label { font-size: var(--t-md); font-weight: 500; line-height: var(--lh-tight); }
.custom-service__label small { display: block; color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-body); margin-top: 2px; }
.custom-service .service-note { margin-left: var(--s-1); vertical-align: middle; width: 18px; height: 18px; padding: 0; border: 0; opacity: .7; }
.custom-stepper { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; width: 104px; align-items: center; border: 1px solid var(--c-line); border-radius: var(--r-pill); }
.custom-stepper button { display: grid; place-items: center; width: 30px; height: 34px; padding: 0; background: transparent; color: var(--c-text); border: 0; font: inherit; font-size: var(--t-md); cursor: pointer; }
.custom-stepper button:disabled { color: var(--c-muted); opacity: .4; cursor: default; }
.custom-stepper input { width: 100%; min-width: 0; padding: 0; appearance: textfield; border: 0; background: transparent; color: var(--c-text); font: inherit; font-size: var(--t-sm); text-align: center; }
.custom-stepper input::-webkit-inner-spin-button, .custom-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.quote-cart-summary { position: sticky; top: 110px; padding: var(--s-4) 0 var(--s-4) var(--s-5); border-left: 1px solid var(--c-line); }
.custom-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1); font-size: var(--t-num); font-weight: 600; line-height: var(--lh-tight); margin-top: var(--s-2); }
.custom-total small { font-size: var(--t-md); font-weight: 400; }
.custom-count { color: var(--c-muted); font-size: var(--t-sm); margin: var(--s-2) 0 var(--s-4); }
.custom-contract { margin-bottom: var(--s-3); }
.custom-contract label, .custom-contract-total > span { font-size: var(--t-sm); color: var(--c-muted); }
.custom-contract-total strong { font-size: var(--t-sm); }
.custom-select { margin-top: var(--s-4); font-size: var(--t-sm); padding: 10px var(--s-4); }
.custom-select:disabled { opacity: .4; cursor: default; }
.custom-breakdown { margin: var(--s-4) 0 0; border-top: 1px dotted var(--c-pill-line); padding-top: var(--s-3); }
.custom-breakdown summary { cursor: pointer; font-size: var(--t-sm); color: var(--c-muted); margin-bottom: var(--s-3); }
.custom-breakdown .quote-line { font-size: var(--t-sm); margin-top: var(--s-2); }
.custom-breakdown .quote-muted { margin-top: var(--s-3); }
.custom-terms { margin-top: var(--s-5); border-top: 1px dotted var(--c-pill-line); padding-top: var(--s-4); color: var(--c-muted); font-size: var(--t-sm); }
.custom-terms summary { cursor: pointer; }
.custom-terms p { margin-top: var(--s-3); max-width: 100ch; }
.quote-muted { color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-body); }
.quote-warning { padding: var(--s-3); background: var(--c-surface); border-left: 2px solid var(--c-red); font-size: var(--t-sm); }
.quote-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-size: var(--t-md); }
.quote-line > :last-child { text-align: right; flex-shrink: 0; }
.quote-line strong { font-weight: 500; }
.quote-term { font: inherit; font-size: var(--t-sm); background: var(--c-card); border: 1px solid var(--c-pill-line); border-radius: var(--r-pill); color: var(--c-text); padding: var(--s-2) var(--s-3); }
.quote-primary, .quote-secondary { display: block; width: 100%; padding: var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--c-pill-line); font: inherit; font-size: var(--t-md); cursor: pointer; text-align: center; text-decoration: none; line-height: var(--lh-body); }
.quote-primary { background: var(--c-red); color: var(--c-light); border-color: var(--c-red); }
.quote-secondary { background: transparent; color: var(--c-text); }
.quote-primary:hover, .quote-secondary:hover { filter: brightness(1.15); }
.quote-primary:disabled, .quote-quantity button:disabled { opacity: .4; cursor: default; }
.quote-link { display: inline-block; font: inherit; font-size: var(--t-sm); padding: var(--s-3) 0; color: var(--c-muted); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.quote-empty { padding: var(--s-8) var(--gutter); max-width: 700px; }
.quote-empty h2 { font-size: var(--t-2xl); font-weight: 600; }
.quote-empty p { color: var(--c-muted); margin: var(--s-5) 0; }
.quote-cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(310px, 1fr); gap: var(--s-6); align-items: start; padding: 0 var(--gutter); }
.quote-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.quote-item h2, .quote-cart-summary h2, .quote-request h2, .quote-export-dialog h2 { font-size: var(--t-lg); font-weight: 600; line-height: var(--lh-tight); margin: 0 0 var(--s-4); }
.quote-item { padding: var(--s-5) 0; border-top: 1px dotted var(--c-pill-line); }
.quote-item p { margin: var(--s-2) 0; white-space: pre-line; overflow-wrap: anywhere; }
.quote-item .label { color: var(--c-muted); font-size: var(--t-sm); margin-bottom: var(--s-2); }
.quote-remove { display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--c-text); cursor: pointer; font: inherit; font-size: var(--t-num); line-height: 1; min-width: 48px; height: 48px; touch-action: manipulation; }
.quote-remove:hover { background: rgba(255,255,255,.16); }
.quote-item__controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-4) 0 var(--s-2); }
.quote-quantity { display: flex; align-items: center; border: 1px solid var(--c-pill-line); border-radius: var(--r-pill); overflow: hidden; }
.quote-quantity button { background: transparent; color: inherit; border: 0; font: inherit; font-size: var(--t-lg); width: 40px; height: 38px; cursor: pointer; }
.quote-quantity output { min-width: 36px; text-align: center; font-size: var(--t-md); }
.quote-item__total { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.quote-cart-summary > .quote-line { margin-top: var(--s-4); flex-wrap: wrap; }
.quote-grand { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.quote-grand span { font-size: var(--t-sm); color: var(--c-muted); }
.quote-grand strong { display: block; font-size: var(--t-num); font-weight: 600; margin: var(--s-3) 0; overflow-wrap: anywhere; }
.quote-actions { display: grid; gap: var(--s-3); margin: var(--s-4) 0 var(--s-2); }
.quote-request { margin: var(--s-7) var(--gutter); padding-top: var(--s-6); border-top: 1px solid var(--c-line); scroll-margin-top: 100px; max-width: 950px; }
.quote-request form { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.quote-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.quote-request label { display: block; color: var(--c-muted); font-size: var(--t-sm); }
.quote-request input:not([type="checkbox"]), .quote-request textarea { display: block; width: 100%; margin-top: var(--s-2); padding: var(--s-3); border: 1px solid var(--c-pill-line); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--t-md); text-transform: none; }
.quote-consent input { margin-right: var(--s-3); accent-color: var(--c-red); }
.quote-export-dialog, .quote-copy-dialog { color: var(--c-text); background: var(--c-card); border: 1px solid var(--c-line); padding: var(--s-5); width: min(720px, calc(100vw - 32px)); max-height: 88svh; }
.quote-export-dialog::backdrop, .quote-copy-dialog::backdrop { background: rgba(0,0,0,.8); }
.quote-export-dialog img { width: 100%; display: block; margin: var(--s-4) 0 var(--s-6); }
.quote-export-dialog a { margin-top: var(--s-5); }
.quote-copy-dialog textarea { width: 100%; height: 50svh; font: inherit; font-size: var(--t-sm); color: inherit; background: transparent; }
.quote-select:focus-visible, .quote-dock:focus-visible, .custom-pack input:focus-visible, .quote-page button:focus-visible, .quote-page a:focus-visible, .quote-term:focus-visible { outline: 2px solid var(--c-text); outline-offset: 4px; }
@media (max-width: 1150px) {
  .custom-layout { grid-template-columns: minmax(0, 1fr); }
  .custom-main, .custom-summary { grid-column: 1; }
  .custom-summary { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .custom-summary__analytics { display: block; border-left: 1px dotted var(--c-pill-line); padding-left: var(--s-5); }
  .custom-mix { padding-top: 0; margin-top: 0; border-top: 0; }
}
@media (max-width: 1000px) {

  .quote-cart-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-cart-summary { position: static; border-left: 0; border-top: 1px solid var(--c-line); padding: var(--s-5) 0 0; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .menu__group { grid-template-columns: minmax(0, 1fr); }
  .menu__list, .menu__list li { display: block; }
  .menu__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "desc desc" "time price"; row-gap: var(--s-3); }
  .menu__info { display: contents; }
  .menu__name { grid-area: name; }
  .menu__desc { grid-area: desc; }
  .menu__time { grid-area: time; }
  .menu__price-actions { grid-area: price; }
}
@media (max-width: 700px) {
  #priceTabs .price-selection { margin-left: 0; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .price-selection .quote-dock { padding-left: var(--s-3); }
  .custom-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .custom-controls__row { grid-template-columns: minmax(0, 1fr); }
  .custom-summary { position: static; grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
  .custom-summary__analytics { padding-left: 0; border-left: 0; padding-top: var(--s-5); border-top: 1px dotted var(--c-pill-line); }
  .custom-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .custom-summary .custom-total { font-size: var(--t-num); }
  .custom-tools { gap: var(--s-3); }
  .quote-section-head { align-items: center; }
  .custom-mode { flex-wrap: wrap; }
  .quote-section-head { flex-wrap: wrap; }
  .quote-line { flex-wrap: wrap; row-gap: var(--s-2); }
  .custom-breakdown .quote-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .quote-form-grid { grid-template-columns: 1fr; }
  .menu__list, .menu__list li { display: block; }
  .menu__row { grid-template-columns: minmax(0, 1fr) auto; }
  .menu__price-actions { grid-area: price; }
}
@media (max-width: 480px) {
  .custom-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-metric { padding: var(--s-4); }

  .custom-metric > div { flex-wrap: wrap; gap: var(--s-1); }
  .custom-mix { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .custom-mix > svg { margin: 0 auto; }
  .menu__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "desc desc" "time price"; }
  .menu__price-actions { flex-wrap: wrap; }
}
@media print { .quote-dock, .quote-toast { display: none; } }

.custom-discount { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); color: var(--c-muted); font-size: var(--t-sm); }
.custom-discount strong { color: var(--c-text); font-weight: 500; }
.custom-saving { margin: var(--s-2) 0 0; color: var(--c-text); font-size: var(--t-sm); }
.custom-draft-note { margin: var(--s-2) 0 0; }
.custom-contract .quote-term { max-width: 100%; }
.custom-mix__empty { grid-column: 1 / -1; }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 701px) {
    .custom-controls__row { grid-template-rows: auto; grid-auto-rows: minmax(88px, auto); row-gap: 0; }
    .custom-controls__row .custom-group { grid-row: 1 / span var(--custom-tracks); }
    .custom-controls__row .custom-group:first-child { grid-column: 1; }
    .custom-controls__row .custom-group:nth-child(2) { grid-column: 2; }
    .custom-controls__row .custom-group:only-child { grid-column: 1 / -1; }
    .custom-controls__row .custom-group { grid-template-rows: subgrid; }
  }
}
.custom-pack { font-variant-numeric: tabular-nums; }

/* Catalogue-backed add-ons keep their own billing period in the shared quote. */
.custom-addons { grid-column: 1 / -1; padding: var(--s-5); border-radius: var(--r-lg); background: var(--c-surface); min-width: 0; }
.custom-addons__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.custom-addons__head .quote-link { padding: 0; text-decoration: none; }
.addon-trigger { border: 0; padding: 0; background: transparent; color: var(--c-text); font: inherit; font-size: var(--t-md); font-weight: 600; text-align: left; cursor: pointer; }
.addon-trigger > span:last-child { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: var(--s-2); border-radius: 50%; background: var(--c-red); color: var(--c-light); font-size: var(--t-md); font-weight: 400; line-height: 1; }
#customAddonCount { color: var(--c-muted); font-weight: 400; }
.addon-picked { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: var(--s-3); align-items: center; padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px dotted var(--c-pill-line); font-size: var(--t-sm); }
.addon-picked > div { min-width: 0; }
.addon-picked small { display: block; color: var(--c-muted); font-size: var(--t-sm); margin-top: var(--s-1); }
.addon-picked__price { text-align: right; font-variant-numeric: tabular-nums; }
.addon-remove { border: 0; background: transparent; color: var(--c-muted); font: inherit; font-size: var(--t-lg); width: 28px; height: 32px; cursor: pointer; }
.addon-dialog { width: min(880px, calc(100vw - 32px)); max-height: 90dvh; margin: auto; padding: var(--s-5); border: 0; border-radius: var(--r-lg); color: var(--c-text); background: var(--c-card); text-transform: none; }
.addon-dialog[open] { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; gap: var(--s-4); }
.addon-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
.addon-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.addon-dialog h2 { margin: 0; font-size: var(--t-lg); font-weight: 600; }
.addon-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .4fr); gap: var(--s-3); }
.addon-toolbar input { min-width: 0; width: 100%; border: 1px solid var(--c-pill-line); padding: var(--s-2) var(--s-3); border-radius: 0; background: transparent; color: var(--c-text); font: inherit; font-size: var(--t-sm); text-transform: none; }
.addon-toolbar .quote-term { min-width: 0; width: 100%; }
.addon-options { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.addon-options .custom-mode { margin: 0; }
.addon-contract { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-muted); }
.addon-contract[hidden], #customAddonList[hidden] { display: none; }
.addon-frequency-note { margin: 0; }
.addon-list { overflow: auto; max-height: 48dvh; overscroll-behavior: contain; min-height: 0; scrollbar-gutter: stable; }
.addon-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px dotted var(--c-pill-line); }
.addon-row__info { min-width: 0; }
.addon-row__name { font-size: var(--t-md); font-weight: 500; }
.addon-row__info small, .addon-row__info p { display: block; margin: var(--s-1) 0 0; font-size: var(--t-sm); color: var(--c-muted); }
.addon-row .service-note { width: 18px; height: 18px; padding: 0; margin-left: var(--s-1); border: 0; vertical-align: middle; }
.addon-row__price { text-align: right; font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.addon-row__price small { display: block; color: var(--c-muted); font-size: var(--t-sm); }
.addon-empty { padding: var(--s-5) 0; }
.addon-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.addon-footer .quote-link { padding: 0; }
.addon-footer__total { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.addon-dialog button:focus-visible, .addon-dialog input:focus-visible, .addon-dialog select:focus-visible, .addon-dialog a:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
@media (max-width: 600px) {
  .addon-toolbar { grid-template-columns: minmax(0, 1fr); }
  .addon-row { grid-template-columns: minmax(0, 1fr) 22px; gap: var(--s-2) var(--s-3); }
  .addon-row__info { grid-column: 1; }
  .addon-row__price { grid-column: 1; text-align: left; font-size: var(--t-sm); }
  .addon-row__price small { display: inline; margin-left: var(--s-1); }
  .addon-row > .quote-select { grid-column: 2; grid-row: 1 / span 2; }
  .addon-picked { grid-template-columns: minmax(0, 1fr) 28px; }
  .addon-picked__price { grid-column: 1; grid-row: 2; text-align: left; }
  .addon-picked > .addon-remove { grid-column: 2; grid-row: 1 / span 2; }
  .addon-list { max-height: 40dvh; }
}

/* Selection follows the Custom 12-column layout and type scale. */
.quote-page .page-title { font-size: var(--t-2xl); line-height: var(--lh-tight); padding-bottom: var(--s-4); }
.quote-cart-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.quote-items { grid-column: span 8; min-width: 0; }
.quote-items { display: grid; gap: var(--s-3); }
.quote-list-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); color: var(--c-text); font-size: var(--t-lg); font-weight: 600; padding: 0 var(--gutter) var(--s-4); }
.quote-list-heading span:last-child { color: var(--c-muted); font-size: var(--t-sm); font-weight: 400; }
.quote-item { position: relative; padding: var(--s-6); border: 0; border-radius: var(--r-lg); background: var(--c-surface); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.quote-item__head { grid-column: 1 / -1; align-items: center; }
.quote-item h2 { margin: 0; font-size: var(--t-num); }
.quote-item .label { margin: 0 0 var(--s-1); font-size: var(--t-sm); }
.quote-item .quote-item__rate { margin: 0; font-size: var(--t-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.quote-item .quote-item__caption { margin: 0; color: var(--c-muted); font-size: var(--t-md); text-align: left; }
.quote-item__controls { grid-column: 1 / -1; gap: var(--s-2); margin: var(--s-2) 0 0; }
.quote-item__controls .quote-link { font-size: var(--t-md); margin-left: auto; }
.quote-item > .quote-muted, .quote-item > .quote-warning { grid-column: 1 / -1; font-size: var(--t-md); margin: 0; }
.quote-item__details { grid-column: 1 / -1; margin-top: var(--s-1); font-size: var(--t-md); }
.quote-item__details summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; color: var(--c-text); cursor: pointer; list-style: none; padding: var(--s-2) 0; }
.quote-item__details summary::-webkit-details-marker { display: none; }
.quote-item__details[open] summary span { transform: rotate(45deg); }
.quote-item__detail-body { border-top: 1px solid var(--c-line); padding-top: var(--s-3); }
.quote-item__detail-body .quote-muted { color: var(--c-text); }
.quote-item__detail-body .quote-line { gap: var(--s-4); padding: var(--s-1) 0; }
.quote-item__detail-body .quote-line > span:last-child { white-space: nowrap; }
.quote-item__total { grid-column: 1 / -1; margin-top: 0; padding-top: var(--s-4); font-size: var(--t-md); }
.quote-item__total strong { font-size: var(--t-lg); font-weight: 600; }
.quote-cart-summary { grid-column: span 4; padding: var(--s-6); border: 0; border-radius: var(--r-lg); background: var(--c-red); color: var(--c-light); --c-text: var(--c-light); --c-muted: #ffd7dd; --c-line: rgba(255,255,255,.35); }
.quote-cart-summary h2 { margin: 0 0 var(--s-5); font-size: var(--t-num); }
.quote-cart-summary > .quote-line { font-size: var(--t-md); margin-top: var(--s-3); }
.quote-cart-summary .quote-grand { margin-top: var(--s-5); padding-top: var(--s-5); }
.quote-cart-summary .quote-grand strong { font-size: var(--t-2xl); line-height: var(--lh-tight); margin: var(--s-2) 0; }
.quote-cart-summary > .quote-muted { font-size: var(--t-md); margin: var(--s-2) 0; }
.quote-cart-summary .custom-breakdown { margin: var(--s-4) 0 0; padding-top: var(--s-4); font-size: var(--t-md); }
.quote-cart-summary .quote-primary { border: 0; background: var(--c-light); color: var(--c-ink); }
.quote-cart-summary .quote-secondary { border: 0; background: rgba(0,0,0,.2); color: var(--c-light); }
.quote-cart-summary .quote-link { color: var(--c-light); }
.quote-actions { gap: var(--s-2); margin-top: var(--s-5); }
.quote-export-dialog { box-sizing: border-box; border: 0; border-radius: var(--r-lg); padding: var(--s-5); width: min(960px, calc(100vw - 32px)); max-height: 90dvh; overflow: auto; margin: auto; }
.quote-export-dialog > .quote-item__head { position: sticky; top: 0; background: var(--c-card); padding: var(--s-2) 0; z-index: 2; }
.quote-export-dialog h2 { margin: 0; font-size: var(--t-lg); }
.quote-export-dialog a { display: grid; place-items: center; min-height: 48px; margin: var(--s-4) 0; width: 100%; border: 0; background: var(--c-red); color: var(--c-light); padding: var(--s-2) var(--s-4); font-size: var(--t-md); }
.quote-export-dialog img { width: 100%; max-width: 800px; height: auto; border-radius: 0; margin: 0 auto var(--s-5); }
@media (max-width: 800px) {
  .quote-cart-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-items, .quote-cart-summary { grid-column: 1; }
}
@media (max-width: 500px) {
  .quote-item { padding: var(--s-4); grid-template-columns: minmax(0, 1fr); }
  .quote-item .quote-item__caption { text-align: left; }
  .quote-item__controls .quote-link { margin-left: 0; }
}

/* Four full-width quantity tracks, with the result below the controls. */
.custom-slider-pack .custom-layout { grid-template-columns: minmax(0, 1fr); }
.custom-slider-pack .custom-main { grid-column: 1 / -1; display: block; padding: var(--s-5); background: var(--c-surface); border-radius: var(--r-lg); }
.custom-slider-controls { display: grid; gap: var(--s-5); }
.custom-slider-pack .custom-slider-service { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); border: 0; min-height: 0; padding: 0; }
.custom-slider-service .custom-service__label small { display: inline; margin-left: var(--s-3); }
.custom-range { grid-column: 1 / -1; appearance: none; width: 100%; min-width: 0; height: 18px; margin: 0; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: linear-gradient(to right, var(--c-red) 0% var(--range-fill), var(--c-bg) var(--range-fill) 100%); cursor: pointer; touch-action: pan-y; }
.custom-range::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--c-light); box-shadow: 0 2px 8px #0005; }
.custom-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--c-light); box-shadow: 0 2px 8px #0005; }
.custom-range:focus-visible { outline: 2px solid var(--c-text); outline-offset: 5px; }
.custom-slider-pack .custom-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.custom-slider-pack .custom-summary__analytics { justify-content: center; border-left: 1px solid var(--c-line); padding-left: var(--s-5); }
.custom-slider-pack .custom-mix { grid-template-columns: 100px minmax(0, 1fr); align-items: center; border: 0; padding: 0; margin: 0; }
.custom-slider-pack .custom-mix > svg { width: 100px; height: 100px; }
.custom-slider-pack .custom-mix__empty { grid-column: auto; text-align: left; }
@media (max-width: 700px) {
  .custom-slider-service .custom-service__label small { display: block; margin-left: 0; }
  .custom-slider-pack .custom-summary { grid-template-columns: minmax(0, 1fr); }
  .custom-slider-pack .custom-summary__analytics { border-left: 0; border-top: 1px solid var(--c-line); padding-left: 0; padding-top: var(--s-4); }
  .custom-slider-pack .custom-main { padding: var(--s-4); }
}

/* Builder: same 12-column guide and tokens as the Pricing cards. */
.quote-term, .price-sel { appearance: none; -webkit-appearance: none; box-sizing: border-box; min-height: 44px; max-width: 100%; padding: var(--s-2) 44px var(--s-2) var(--s-3); line-height: var(--lh-body); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }
.quote-term:disabled { opacity: .5; cursor: default; }
.custom-builder .custom-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.custom-builder .custom-main { grid-column: span 8; padding: var(--s-6); }
.custom-builder .custom-summary { grid-column: span 4; display: block; padding: var(--s-5); border-top: 0; background: var(--c-red); color: var(--c-light); --c-text: var(--c-light); --c-muted: #ffd7dd; --c-line: rgba(255,255,255,.35); --c-pill-line: rgba(255,255,255,.4); }
.custom-builder .custom-slider-controls { gap: var(--s-6); }
.custom-builder .custom-slider-service { gap: var(--s-4); }
.custom-builder .custom-service__label small { display: block; margin: var(--s-1) 0 0; }
.custom-quantity { display: flex; align-items: center; gap: var(--s-4); }
.custom-service-amount { color: var(--c-text); font-size: var(--t-lg); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.custom-builder .custom-stepper { width: 124px; grid-template-columns: 34px minmax(0, 1fr) 34px; }
.custom-builder .custom-stepper button { width: 34px; height: 42px; }
.custom-builder .custom-stepper input { font-size: var(--t-lg); font-weight: 600; }
.custom-result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--t-md); font-weight: 600; }
.custom-billing { font-size: var(--t-sm); font-weight: 400; color: var(--c-muted); }
.custom-builder .custom-total { display: block; font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.04em; white-space: nowrap; margin-top: var(--s-4); }
.custom-builder .custom-total small { display: block; font-size: var(--t-sm); letter-spacing: 0; color: var(--c-muted); margin-top: var(--s-1); }
.custom-builder .custom-count { min-height: 2.6em; margin: var(--s-3) 0; }
.custom-builder .custom-contract { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: 0; }
.custom-builder .custom-contract .quote-term { width: 100%; text-align: left; }
.custom-builder .custom-summary .quote-term:disabled { opacity: 1; background-color: rgba(0,0,0,.2); color: var(--c-light); border-color: rgba(255,255,255,.4); }
.custom-cost-lines { display: grid; gap: var(--s-2); padding: var(--s-4) 0; margin-top: var(--s-4); border-top: 1px solid var(--c-line); }
.custom-cost-lines .quote-line { font-size: var(--t-sm); gap: var(--s-2); }
.custom-cost-lines .quote-line > span { color: var(--c-muted); }
.custom-cost-lines strong { font-weight: 500; }
.custom-cost-lines .custom-contract-total { padding-top: var(--s-3); margin-top: var(--s-1); border-top: 1px solid var(--c-line); }
.custom-cost-lines .custom-contract-total strong { font-size: var(--t-lg); font-weight: 600; }
.custom-builder .custom-draft-note { margin: 0; min-height: 1.6em; }
.custom-result-actions { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.custom-builder .custom-select { margin: 0; min-height: 46px; border: 0; box-shadow: none; background: var(--c-light); color: var(--c-ink); font-size: var(--t-md); }
.custom-summary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--s-2) var(--s-4); border: 1px solid var(--c-pill-line); border-radius: var(--r-pill); color: var(--c-text); font-size: var(--t-sm); text-decoration: none; white-space: nowrap; }
.custom-summary-link:hover { border-color: var(--c-text); }
.custom-builder .custom-summary .custom-summary-link { border: 0; background: rgba(0,0,0,.2); color: var(--c-light); }
.custom-builder .custom-summary .custom-summary-link:hover { background: rgba(0,0,0,.3); }
.custom-notice { min-height: 3.2em; margin-top: var(--s-3); color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-body); }
@media (min-width: 1101px) { .custom-builder .custom-summary { position: sticky; top: 100px; } }
@media (max-width: 1100px) { .custom-builder .custom-main { grid-column: span 7; padding: var(--s-5); } .custom-builder .custom-summary { grid-column: span 5; } .custom-quantity { flex-direction: column; align-items: flex-end; gap: var(--s-2); } }
@media (max-width: 700px) {
 .custom-builder .custom-main, .custom-builder .custom-summary { grid-column: 1 / -1; padding: var(--s-4); }
 .custom-builder .quote-section-head { align-items: flex-start; }
 .custom-builder .custom-tools { flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
 .custom-builder .custom-tools > .custom-summary-link { flex-basis: 100%; }
 .custom-builder .custom-mode { flex-wrap: wrap; }
 .custom-builder .custom-mode > span { margin-left: 0; flex-basis: 100%; }
 .custom-builder .custom-total { font-size: var(--t-2xl); }
 .custom-builder .custom-stepper { width: 108px; }
 .custom-builder .custom-service label { font-size: var(--t-sm); }
}
.custom-builder .custom-layout { align-items: stretch; }
.custom-builder .custom-slider-controls { height: 100%; align-content: space-between; }
.custom-builder .custom-count { min-height: 1.6em; margin: var(--s-2) 0 var(--s-3); }
.custom-builder .custom-contract { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.custom-builder .custom-total { margin-top: var(--s-2); }
.custom-result-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.custom-builder .custom-select { grid-row: auto; align-self: stretch; padding: var(--s-2); }
.custom-builder .custom-result-actions .custom-summary-link { padding: var(--s-2); }
.custom-builder .custom-notice { min-height: 3.2em; }
@media (max-width: 700px) {
 .custom-builder .custom-slider-controls { gap: var(--s-5); }
 .custom-builder .custom-quantity { flex-direction: row; gap: var(--s-2); }
 .custom-builder .custom-service-amount { font-size: var(--t-sm); }
 .custom-builder .custom-stepper { width: 98px; grid-template-columns: 30px minmax(0, 1fr) 30px; }
 .custom-builder .custom-stepper button { width: 30px; }
 .custom-builder .custom-slider-service { column-gap: var(--s-2); }
}
/* Keep the result inside its grid row above Add-on services. */
.custom-builder .custom-summary { position: static; }

/* P1 UX: ขยายพื้นที่แตะของปุ่มเล็กให้ถึง ~44px (ไม่เปลี่ยนหน้าตา) */
.custom-reset, .custom-stepper button, .quote-quantity button, .addon-remove { position: relative; }
.custom-reset::before, .custom-stepper button::before, .quote-quantity button::before, .addon-remove::before { content: ""; position: absolute; inset: -8px -3px; }

@media (prefers-reduced-motion: reduce) { .quote-page *, .addon-dialog *, .quote-toast, .custom-builder * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }