/* The option row: the closed line that says what a choice is set to and opens in place.

   Lifted out of data-objects/object.css so there is ONE of these, not two that have to be kept
   looking alike (Rizwan, 2026-09-24). Two things build these rows now: object.js, which knows the
   forge template system, and pdp-rows.js, which knows nothing and re-presents whatever form a
   bespoke product page already has. Both produce the same markup:

       <details class="pdp-opt">
         <summary><span class="pdp-opt-label">Colors</span>
                  <span class="pdp-opt-value">Walnut - Ivory</span>
                  <span class="pdp-opt-caret"></span></summary>
         <div class="pdp-opt-body"> ...the real controls... </div>
       </details>
*/
/* minmax(0, 1fr) and min-width: 0 together: a grid item will not shrink below its content on its own,
   so a long value ("Cream - Walnut - Terracotta - ...") pushed the row past the card and the caret was
   clipped off the right edge on a phone (Rizwan, 2026-09-25). The value ellipsises instead. */
.pdp-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 20px; border: 1px solid var(--color-border, #cfcfcb); border-radius: 12px; overflow: hidden; background: var(--color-surface, #fff); }
.pdp-opt { min-width: 0; }
.pdp-opt > summary { min-width: 0; }
.pdp-opt + .pdp-opt { border-top: 1px solid var(--color-border, #cfcfcb); }
.pdp-opt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 15px; font-size: 14px; }
.pdp-opt > summary::-webkit-details-marker { display: none; }
.pdp-opt > summary:hover { background: rgba(0, 0, 0, .025); }
.pdp-opt-label { font-weight: 600; flex: none; }
.pdp-opt-value { flex: 1; min-width: 0; text-align: right; color: var(--color-text-secondary, #555); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdp-opt-caret { flex: none; width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .45; transition: transform .16s ease; }
.pdp-opt[open] > summary .pdp-opt-caret { transform: rotate(-135deg) translate(-3px, -3px); }
.pdp-opt-body { padding: 4px 15px 16px; }
.pdp-opt-group { margin: 10px 0 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-tertiary, #737373); }
.pdp-opt-more { margin-top: 10px; }
.pdp-opt-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; }

/* a row whose field the page has hidden (a letter color before there is a name) */
.pdp-opt[hidden] { display: none !important; }