/* CDS tenon configurator: product page. White, minimal; the theme may restyle. */
.cds-cfg {
  --cds-accent: var(--wp--preset--color--blue, #004b87);
  --cds-line: var(--wp--preset--color--line, #e1e6da);
  --cds-muted: var(--wp--preset--color--muted, #5c645a);
  --cds-block: #b32d2e;
  --cds-warn: #8a6100;
  margin: .9em 0;
  font-size: 15px;
  line-height: 1.45;
}
.cds-cfg * { box-sizing: border-box; }
.cds-cfg.is-updating .cds-total:not(.is-starting) .cds-total-value,
.cds-cfg.is-updating .cds-row-price { opacity: .45; transition: opacity .2s; }

/* Options: one grid for the whole list. The label column is as wide as the
   widest label with its amount, so an amount stays on its label's line; the
   dropdowns all end at the configurator's right edge, and only their left
   edge moves to make room for an amount (Mike, Sept 2026). */
.cds-panel { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .6em .75rem; margin-bottom: .6em; }
.cds-panel .cds-field, .cds-panel .cds-offsets { display: contents; }
.cds-field__label { display: flex; align-items: center; gap: .1rem; font-weight: 600; font-size: .92em; white-space: nowrap; }
/* What a choice adds: at the right of its label, next to the dropdown. */
.cds-adder { margin-left: auto; padding-left: .9rem; color: var(--cds-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.cds-field__label label { cursor: pointer; }
/* Custom frame widths: the four members sit indented under Frame width. */
.cds-field-left_stile .cds-field__label, .cds-field-right_stile .cds-field__label, .cds-field-top_rail .cds-field__label, .cds-field-bottom_rail .cds-field__label { font-weight: 400; padding-left: .9rem; }
.cds-cfg select,
.cds-cfg input[type="text"],
.cds-cfg input[type="number"] {
  width: 100%; max-width: 24em; padding: .45em .55em; border: 1px solid #c9c6bd; border-radius: 3px;
  background: #fff; font: inherit; color: #1d1d1d;
}
.cds-panel select, .cds-panel input[type="text"] { max-width: none; }
/* Until a size is entered the options are locked (Mike, Sept 2026). */
.cds-size-first { margin: 0 0 .6em; font-size: 13px; color: var(--cds-muted); }
.cds-size-first[hidden] { display: none; }
.cds-panel.is-locked .cds-field__label { color: var(--cds-muted); }
.cds-cfg select:disabled, .cds-cfg input:disabled { background: var(--wp--preset--color--sage, #f2f5ed); color: var(--cds-muted); cursor: not-allowed; }
.cds-cfg select:focus, .cds-cfg input:focus { outline: 2px solid var(--cds-accent); outline-offset: 1px; }
/* Helper notes are tooltips: an (i) that shows its text on hover or focus. */
.cds-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; margin-left: .35em; padding: 0; border: 1px solid #a9a59b; border-radius: 50%;
  background: #fff; color: var(--cds-muted); font: italic 600 10px/1 Georgia, serif; cursor: help;
}
.cds-tip[hidden] { display: none; }
.cds-tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  /* Centered on the (i); the script shifts it (--cds-tip-x) to stay on screen. */
  transform: translateX(calc(-50% + var(--cds-tip-x, 0px)));
  width: max-content; max-width: min(17rem, calc(100vw - 16px)); white-space: pre-line; text-align: left;
  background: #1d1d1b; color: #fff; font: normal 400 12px/1.45 var(--wp--preset--font-family--sans, -apple-system, Arial, sans-serif);
  padding: .5rem .65rem; border-radius: 3px; z-index: 40; pointer-events: none;
  /* Hidden bubbles take no room, so one near an edge never widens the page. */
  display: none;
}
.cds-tip:hover::after, .cds-tip:focus::after { display: block; }


.cds-messages ul, .cds-row-issues, .cds-todo { list-style: none; margin: 0; padding: 0; }
.cds-messages li, .cds-row-issues li { font-size: 13px; margin: .25em 0; padding-left: 1.1em; position: relative; }
.cds-messages li::before, .cds-row-issues li::before { content: "•"; position: absolute; left: .2em; }
.cds-block { color: var(--cds-block); }
.cds-warn { color: var(--cds-warn); }

.cds-sizes {
  --cds-dim: 7.25em; --cds-num: 4.5em; --cds-id: 8em;
  margin-top: .9em;
}
.cds-units { display: inline-flex; border: 1px solid #c9c6bd; border-radius: 3px; overflow: hidden; }
.cds-units button { background: #fff; border: 0; padding: .2em .65em; font: inherit; font-size: 12px; cursor: pointer; color: var(--cds-muted); }
.cds-units button[aria-pressed="true"] { background: var(--cds-accent); color: #fff; }

/* Header line and size rows share columns, no divider lines (Mike, Sept 2026):
   Width | Height | Quantity | (ID) | line price, x (range tip and in/mm on the header). */
.cds-size-top, .cds-row-inputs { display: grid; grid-template-columns: var(--cds-dim) var(--cds-dim) var(--cds-num) minmax(0, 1fr); gap: .45em; align-items: center; }
.has-line-id { --cds-dim: 6em; --cds-num: 4em; --cds-id: 6.75em; }
.has-line-id .cds-size-top, .has-line-id .cds-row-inputs { grid-template-columns: var(--cds-dim) var(--cds-dim) var(--cds-num) var(--cds-id) minmax(0, 1fr); }
/* Dovetail drawer boxes: Width | Depth | Height | Quantity (dovetail spec 7). */
/* The last column always has room for the size-range tip and in/mm (and the line price and x);
   the boxes give way down to their minimums (Mike, Oct 7 2026). Its width is fixed, not
   content-sized, so the header and every row (separate grids) keep the same columns. */
.has-depth {
  --cds-dim: 6em; --cds-dim-min: 5em; --cds-num: 3.25em; --cds-num-min: 2.75em; --cds-id: 4.5em; --cds-id-min: 2.3em;
  --cds-d: minmax(var(--cds-dim-min), var(--cds-dim)); --cds-n: minmax(var(--cds-num-min), var(--cds-num)); --cds-endw: 5.75em; --cds-end: minmax(var(--cds-endw), 1fr);
}
.has-depth.has-line-id { --cds-dim: 5.5em; }
/* Three size boxes: "Qty" in the header, and room for 1/16" decimals (21.0625). */
.has-depth .cds-size-head .cds-long { display: none; }
.has-depth .cds-size-head .cds-short { display: inline; }
.cds-cfg .has-depth input.cds-size { padding-left: .3em; padding-right: .25em; }
/* Narrow desktop columns with the ID box: a touch smaller, so 1/16" decimals fit beside the arrows. */
@media (min-width: 481px) and (max-width: 1150px) { .cds-cfg .has-depth.has-line-id input.cds-size { font-size: .9em; } }
.has-depth .cds-size-top, .has-depth .cds-row-inputs { grid-template-columns: var(--cds-d) var(--cds-d) var(--cds-d) var(--cds-n) var(--cds-end); gap: .25em; }
.has-depth.has-line-id .cds-size-top, .has-depth.has-line-id .cds-row-inputs { grid-template-columns: var(--cds-d) var(--cds-d) var(--cds-d) var(--cds-n) minmax(var(--cds-id-min), var(--cds-id)) var(--cds-end); }
.cds-size-top { padding-top: .55em; }
.cds-size-head { display: contents; }
.cds-size-head .cds-short { display: none; }
.cds-size-head > span { font-weight: 600; font-size: .85em; text-align: center; white-space: nowrap; }
.cds-size-tools { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.cds-row { padding: .2em 0 .3em; }
/* Width, height and quantity: plain number boxes, number right-aligned. */
.cds-cfg input.cds-size { width: 100%; max-width: none; min-width: 0; padding: .4em .3em .4em .45em; text-align: right; font-variant-numeric: tabular-nums; }
.cds-cfg input.cds-size:invalid { box-shadow: none; }
.cds-cfg input.cds-line-id { width: 100%; max-width: none; min-width: 0; padding: .4em .45em; }
/* The ID show/hide arrow is for phones only. */
.cds-id-toggle { display: none; }
.cds-row.is-blocked .cds-tn_wd, .cds-row.is-blocked .cds-tn_ht, .cds-row.is-blocked .cds-tn_dp { border-color: var(--cds-block); }
.cds-row-end { justify-self: end; display: flex; align-items: center; gap: .3em; }
.cds-row-price { display: inline-flex; align-items: center; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cds-row-price .cds-tip { font-weight: 600; }
.cds-row-btns { display: flex; gap: .1em; }
.cds-row-btn { width: 1.7em; height: 1.7em; border: 1px solid transparent; border-radius: 50%; background: none; font-size: 1.15em; line-height: 1; color: var(--cds-muted); cursor: pointer; padding: 0; }
.cds-row-btn:hover { border-color: var(--cds-line); color: var(--cds-ink, #1d1d1d); }
.cds-row-btn[disabled] { display: none; }
.cds-add { color: var(--cds-accent); font-weight: 600; }
.cds-row-issues:empty { display: none; }

/* Price and Add to cart stay visible while configuring (spec 6.1). */
.cds-summary {
  position: sticky; bottom: 0; z-index: 5; background: #fff;
  padding: .6em 0; margin-top: .4em;
  /* The price always shares Add to cart's line (Mike, Sept 2026). */
  display: flex; flex-wrap: nowrap; align-items: center; gap: .6em;
}
.cds-actions { display: flex; align-items: center; gap: .5em; margin-left: auto; flex: none; }
/* The buy bar's groups (docs/configurator/buy-bar-spec.md) only group things on
   desktop, where this row is the bar along the bottom (theme: .cds-buybar). */
.cds-buybar__info, .cds-buybar__price { display: contents; }
@media (min-width: 901px) {
  .cds-summary.cds-buybar { margin: 0; }
  .cds-summary .cds-buybar__info { display: flex; flex-direction: column; gap: .15em; flex: 1 1 auto; min-width: 0; }
  .cds-summary .cds-buybar__price { display: flex; align-items: center; gap: .6em; }
  .cds-summary .cds-buybar__price .cds-total { flex: 0 1 auto; }
  .cds-summary .cds-ship-box { margin: 0; padding: 0; border: 0; }
}
.cds-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; flex: 1 1 auto; min-width: 0; }
.cds-total-label { font-weight: 600; }
.cds-total-value { font-size: 1.35em; font-weight: 600; }
.cds-fee { flex-basis: 100%; font-size: 13px; color: var(--cds-muted); }
/* The estimated ship date under the total bar (cds-orders, Mike, Oct 14 2026). */
.cds-ship-box { margin: .75em 0 0; padding-top: .75em; border-top: 1px solid var(--cds-line); color: var(--cds-muted); }
.cds-ship-box:empty { display: none; }
/* One line at every width: ship-estimate.js shrinks the font to fit. */
.cds-ship-box .cds-ship { display: block; white-space: nowrap; overflow: hidden; font-size: 15px; }
.cds-ship-box .cds-ship-note { display: block; font-size: 13px; margin-top: .2em; }
/* Add to cart: faded brown until the order can be added, then green (Mike, Sept 2026).
   Specific enough to beat WooCommerce's purple .button.alt states. */
/* Green with white needs large text (19px bold) to pass contrast. */
.woocommerce .cds-cfg button.button.alt.cds-cart { flex: 0 0 auto; min-width: 11em; background: #789d4a; border-color: #789d4a; color: #fff; font-size: 19px; font-weight: 700; }
.woocommerce .cds-cfg button.button.alt.cds-cart:hover, .woocommerce .cds-cfg button.button.alt.cds-cart:focus { background: #688a3f; border-color: #688a3f; color: #fff; }
.woocommerce .cds-cfg button.button.alt.cds-cart:disabled, .woocommerce .cds-cfg button.button.alt.cds-cart:disabled[disabled], .woocommerce .cds-cfg button.button.alt.cds-cart:disabled:hover {
  background: #789d4a; border-color: #789d4a; color: #fff; opacity: .5; cursor: not-allowed;
}
.cds-add-row--sizes { display: none; }
.woocommerce .cds-cfg button.button.cds-add-row { background: #fff; border: 0; color: var(--cds-accent); white-space: nowrap; }
.woocommerce .cds-cfg button.button.cds-add-row:hover { background: var(--wp--preset--color--sage, #f2f5ed); }
.cds-status { font-size: 13px; margin: .4em 0 0; }
.cds-cfg.has-error .cds-status { color: var(--cds-block); }
.cds-starting { white-space: nowrap; }
.cds-editing { background: var(--wp--preset--color--sage, #f2f5ed); border-left: 3px solid var(--cds-accent); padding: .5em .75em; font-size: 13px; }
.cds-status a { font-weight: 600; }

@media (max-width: 480px) {
  .cds-panel { gap: .5em .5rem; }
  .cds-adder { font-size: .95em; padding-left: .6rem; }
  /* Size rows stay on one line on phones: width, height, quantity, +, line price and x. */
  .cds-sizes { --cds-dim: 5.3em; --cds-num: 3em; }
  /* The ID column doesn't fit on a phone's line: a down arrow right of Qty
     shows that row's ID box underneath (Mike, Sept 2026). */
  .has-line-id .cds-size-top, .has-line-id .cds-row-inputs { grid-template-columns: var(--cds-dim) var(--cds-dim) var(--cds-num) 1.5em minmax(0, 1fr); }
  .has-line-id .cds-size-head > span:nth-child(4) { display: none; }
  .has-line-id .cds-size-tools { grid-column: 5; }
  .has-line-id .cds-id-toggle {
    display: inline-flex; align-items: center; justify-content: center; grid-column: 4; grid-row: 1;
    width: 1.5em; height: 1.9em; padding: 0; border: 0; background: none; color: var(--cds-accent); font-size: 1em; font-weight: 600; cursor: pointer;
  }
  .has-line-id .show-id .cds-id-toggle { transform: rotate(180deg); }
  .has-line-id .cds-row-end { grid-column: 5; grid-row: 1; }
  .cds-cfg .has-line-id input.cds-line-id { display: none; grid-column: 1 / 4; grid-row: 2; }
  .cds-cfg .has-line-id .show-id input.cds-line-id { display: block; }
  /* Three sizes on a phone's line (dovetail): narrower boxes; the ID arrow moves one column right. */
  .cds-cfg .has-depth input.cds-size { font-size: .9em; }
  .cds-sizes.has-depth { --cds-dim: 4.4em; --cds-dim-min: 3.3em; --cds-num: 2.8em; --cds-num-min: 2.2em; --cds-endw: 5.9em; }
  .has-depth.has-line-id .cds-size-top, .has-depth.has-line-id .cds-row-inputs { grid-template-columns: var(--cds-d) var(--cds-d) var(--cds-d) var(--cds-n) 1.5em var(--cds-end); }
  .has-depth.has-line-id .cds-size-head > span:nth-child(4) { display: inline; }
  .has-depth.has-line-id .cds-size-head > span:nth-child(5) { display: none; }
  .has-depth.has-line-id .cds-size-tools, .has-depth.has-line-id .cds-row-end { grid-column: 6; }
  .has-depth.has-line-id .cds-id-toggle { grid-column: 5; }
  .cds-cfg .has-depth.has-line-id input.cds-line-id { grid-column: 1 / 5; }
  /* Phones: the price and Add to cart share one line; the label sits small
     above the amount. Add row moves under the sizes as a small borderless
     "+ Add row" (Mike, Sept 2026). */
  .cds-total { flex-direction: column; align-items: flex-start; gap: 0; }
  .cds-total-label { font-size: .8em; line-height: 1.2; white-space: nowrap; }
  .cds-total-value { font-size: 1.25em; line-height: 1.2; white-space: nowrap; }
  .cds-fee { font-size: 11px; }
  .woocommerce .cds-cfg button.button.alt.cds-cart { min-width: 0; padding-left: 1.1em; padding-right: 1.1em; white-space: nowrap; }
  .cds-add-row--bar { display: none !important; }
  .cds-add-row--sizes {
    display: inline-block; margin: .2em 0 0; padding: .35em 0; border: 0; background: none;
    color: var(--cds-accent); font: inherit; font-size: .9em; font-weight: 600; cursor: pointer;
  }
  .cds-add-row--sizes:hover { text-decoration: underline; }
  .cds-size-head .cds-long { display: none; }
  .cds-size-head .cds-short { display: inline; }
  .cds-size-top, .cds-row-inputs { gap: .3em; }
  .has-depth .cds-size-top, .has-depth .cds-row-inputs { gap: .3em; }
  .cds-size-tools { gap: .3rem; }
  .cds-cfg input.cds-size { padding: .4em .3em; -moz-appearance: textfield; appearance: textfield; }
  /* Phones have no spinner arrows; a narrow desktop window doesn't lose room to them either. */
  .cds-cfg input.cds-size::-webkit-inner-spin-button, .cds-cfg input.cds-size::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .cds-row-end { gap: 0; }
  .cds-row-price { font-size: .9em; }
  .cds-row-price .cds-tip { margin-left: .2em; width: 14px; height: 14px; }
  .cds-row-btn { width: 1.45em; height: 1.45em; font-size: 1.05em; }
}
/* The narrowest phones (320px): slightly smaller size boxes. */
@media (max-width: 359px) {
  .cds-sizes { font-size: 14px; --cds-dim: 4.35em; --cds-num: 2.7em; }
  .cds-sizes.has-depth { --cds-dim: 3.95em; --cds-dim-min: 3.6em; --cds-num: 2.3em; --cds-num-min: 1.9em; --cds-endw: 6.2em; }
  .cds-sizes.has-depth.has-line-id { --cds-dim-min: 3.25em; }
  .cds-size-top, .cds-row-inputs { gap: .25em; }
  .has-depth .cds-size-top, .has-depth .cds-row-inputs { gap: .2em; }
}

/* 3D viewer (docs/configurator/3d-visualizer-spec.md): over the product photo, same box. */
.has-cds-viewer { position: relative; }
.has-cds-viewer img { visibility: hidden; }
.cds-viewer { display: none; position: absolute; inset: 0; z-index: 2; background: #fff; }
.has-cds-viewer > .cds-viewer { display: block; animation: cds-viewer-in 180ms ease-out; }
.cds-viewer__canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.cds-viewer__canvas:active { cursor: grabbing; }
.cds-viewer__controls { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.cds-viewer__btn { pointer-events: auto; font: inherit; font-size: 13px; line-height: 1; padding: 7px 12px; border: 1px solid #d8d4cc; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #333; cursor: pointer; }
.cds-viewer__btn:hover, .cds-viewer__btn:focus-visible { border-color: #8a7f70; }
.cds-viewer__btn[aria-pressed="true"] { background: #6b5d4f; border-color: #6b5d4f; color: #fff; }
@keyframes cds-viewer-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .has-cds-viewer > .cds-viewer { animation: none; } .cds-viewer__canvas { cursor: default; } }

/* The stage: the 3D view in place of the gallery on configured products (Mike, Oct 7 2026).
   The theme sizes it; the photo fills it until the view is drawn. */
.cds-stage { position: relative; background: #fff; }
.cds-stage__frame { position: relative; width: 100%; height: 100%; }
.cds-stage__frame > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cds-viewer__sample { position: absolute; top: 12px; left: 12px; z-index: 3; margin: 0; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid #e4e2dc; font-size: 12px; color: #6b6861; pointer-events: none; }
.cds-viewer__sample[hidden] { display: none; }
.cds-viewer__full { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; padding: 0; border: 1px solid #d8d4cc; border-radius: 50%; background: rgba(255, 255, 255, 0.92) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); cursor: pointer; }
.cds-viewer__full:hover, .cds-viewer__full:focus-visible { border-color: #8a7f70; }
.cds-viewer__full[aria-pressed="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.cds-stage.is-full { position: fixed !important; inset: 0 !important; z-index: 100000; width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; }
html.cds-noscroll, html.cds-noscroll body { overflow: hidden; }
.cds-viewer__hint { position: absolute; left: 50%; top: 50%; z-index: 3; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(29, 29, 27, .78); color: #fff; font-size: 13px; transform: translate(-50%, -50%); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.cds-viewer__hint.is-on { opacity: 1; }
/* Phones: 16px boxes, so iOS doesn't zoom the page when one is tapped (Mike, Oct 8 2026: the page shifted). */
@media (max-width: 900px) and (pointer: coarse) {
  .cds-cfg input, .cds-cfg select, .cds-cfg .has-depth input.cds-size, .cds-cfg .has-depth.has-line-id input.cds-size { font-size: 16px; }
}