.cc-ob-from { color: #68716e; font-size: .7em; }
.cc-ob-dialog:not([open]), .cc-ob-dialog [hidden] { display: none !important; }
.cc-ob-sizes legend small { display: block; margin-top: 3px; color: #68716e; font-size: 12px; font-weight: 400; }
.cc-ob-size-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cc-ob-size-grid > p { display: contents; }
.cc-ob-size-grid label { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 3px 12px; min-height: 82px; padding: 14px; border: 1px solid #dce4e0; border-radius: 6px; cursor: pointer; }
.cc-ob-size-grid input { grid-row: 1 / 3; margin: 0; accent-color: #2f7d71; }
.cc-ob-size-grid strong { grid-column: 2; font-size: 15px; font-weight: 550; white-space: nowrap; }
.cc-ob-size-grid small { grid-column: 2; color: #68716e; font-size: 12px; }
.cc-ob-size-grid b { grid-column: 3; grid-row: 1 / 3; justify-self: end; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cc-ob-size-grid label:has(:checked) { border-color: #2f7d71; background: #eff6f3; box-shadow: inset 0 0 0 1px #2f7d71; }
.cc-ob-upload-copy { margin: 0 0 15px; color: #68716e; font-size: 13px; line-height: 1.55; }
.cc-ob-preview { justify-content: center; }
.cc-ob-preview-frame { position: relative; display: flex; flex: none; box-sizing: border-box; width: 100%; max-width: 760px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #dce4e0; background: #fff; box-shadow: 0 4px 22px rgb(30 41 37 / 12%); }
/* Keep WordPress paragraph wrappers and image dimensions out of frame sizing. */
.cc-ob-preview-frame > p { display: contents; margin: 0; }
.cc-ob-preview-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; object-position: center; }
.cc-ob-preview-empty, .cc-ob-pdf { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #68716e; }
.cc-ob-preview-empty .dashicons, .cc-ob-pdf .dashicons { width: 32px; height: 32px; color: #2f7d71; font-size: 32px; }
.cc-ob-preview-empty strong, .cc-ob-pdf strong { font-size: 13px; font-weight: 550; }
.cc-ob-resolution { max-width: 760px; color: #68716e !important; line-height: 1.5; text-align: center; }
.cc-ob-resolution.is-warning { color: #9f4a31 !important; }
.cc-ob-field { display: grid; gap: 7px; margin: 0 0 17px; }
.cc-ob-field > label { font-size: 14px; font-weight: 550; }
.cc-ob-field label span { color: #68716e; font-size: 12px; font-weight: 400; }
.cc-ob-field :is(input, textarea) { box-sizing: border-box; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid #dce4e0; border-radius: 5px; background: #fff; color: #303735; font: inherit; line-height: 1.5; box-shadow: none; }
.cc-ob-field textarea { min-height: 82px; resize: vertical; }
.cc-ob-confirm { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #dce4e0; border-radius: 6px; background: #fafcfa; font-size: 13px; cursor: pointer; }
.cc-ob-confirm input { flex: 0 0 17px; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #2f7d71; }
.cc-ob-dialog .cc-yard-review-copy { margin-bottom: 20px; }
.single-product:has(.cc-ob-dialog) .wp-block-woocommerce-product-image-gallery { aspect-ratio: 1 / 1; background: #fff; }
.single-product:has(.cc-ob-dialog) .wp-block-woocommerce-product-image-gallery :is(.woocommerce-product-gallery, .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image, .woocommerce-product-gallery__image > a) { display: block; height: 100%; margin: 0; }
.single-product:has(.cc-ob-dialog) .wp-block-woocommerce-product-image-gallery img.wp-post-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.cc-ob-launch .cc-ob-open { min-width: 158px; }
@media (max-width: 760px) {
    .cc-ob-size-grid { grid-template-columns: 1fr; }
    .cc-ob-dialog .cc-yard-preview { min-height: 29dvh; flex: 0 0 29dvh; border-right: 0; border-bottom: 1px solid #dce4e0; padding: 12px; }
    .cc-ob-dialog .cc-yard-body { display: flex; flex-direction: column; }
    .cc-ob-dialog .cc-yard-controls { flex: 1; }
    .cc-ob-resolution { font-size: 10px !important; }
    .cc-ob-size-grid label { min-height: 78px; }
}