/**
 * Baseline structural styles for the product-options widget.
 * Intentionally minimal / theme-agnostic so the plugin works standalone on
 * any theme. The Openwood theme layers its full design system on top of
 * these same class names (see assets/css/woocommerce.css in the theme).
 */
.ow-options { margin: 24px 0; display: flex; flex-direction: column; gap: 20px; }
.ow-group.is-hidden { display: none !important; }
.ow-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ow-group__head h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ow-group__num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #111; color: #fff; font-size: 11px; }
.ow-group__hint { font-size: 12px; opacity: 0.6; }
.ow-group__guide { font-size: 12px; font-weight: 400; color: var(--gray-500, #8a8a8a); opacity: 0.85; }

.ow-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.ow-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 2px solid #ddd; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; }
.ow-choice.is-active { border-color: #111; }
.ow-choice__sub { opacity: 0.6; }
.ow-choice__price { font-size: 12px; opacity: 0.7; }
.ow-choices--swatch .ow-choice { align-items: center; }
.ow-choice__swatch { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: block; }
.ow-choice__swatch img { width: 100%; height: 100%; object-fit: cover; }

.ow-addons { display: flex; flex-direction: column; gap: 8px; }
.ow-addon { display: flex; align-items: center; gap: 10px; padding: 10px; border: 2px solid #ddd; border-radius: 12px; cursor: pointer; }
.ow-addon.is-active { border-color: #111; }
.ow-addon__media img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.ow-addon__info { flex: 1; display: flex; flex-direction: column; }
.ow-addon__check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ccc; display: grid; place-items: center; }
.ow-addon.is-active .ow-addon__check { background: #111; border-color: #111; color: #fff; }
.ow-addon__check svg, .ow-addon__check i { width: 11px; height: 11px; }
.ow-addon__qty { display: none; align-items: center; gap: 8px; }
.ow-addon.is-active .ow-addon__qty { display: flex; }
.ow-addon__qty button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #ccc; background: #fff; cursor: pointer; }

.ow-options__total { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #e5e5e5; font-size: 15px; }

.ow-delivery-estimate { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 10px 0; }
.ow-delivery-estimate svg, .ow-delivery-estimate i { width: 16px; height: 16px; }

/* ==========================================================================
   Product add-ons (a product linked as an add-on value) + quick-view popup
   ========================================================================== */
.ow-addon__badge--product { display: inline-flex; align-items: center; gap: 4px; }
.ow-addon__badge--product svg, .ow-addon__badge--product i { width: 12px; height: 12px; }
.ow-addon--product .ow-addon__qty { display: none; } /* configured via quick-view, not a qty stepper */
.ow-addon__config { display: block; font-size: 12px; color: var(--gray-600, #6b7280); margin-top: 2px; }
.ow-addon--product .ow-addon__expand i { pointer-events: none; }

/* Quick-view popup (reuses the theme's .modal shell) */
.modal__box--quickview { max-width: 760px; width: 92vw; position: relative; }
.ow-qv { display: flex; gap: 22px; }
.ow-qv__media { flex: 0 0 42%; }
.ow-qv__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md, 12px); display: block; background: var(--gray-100, #f3f3f3); }
.ow-qv__body { flex: 1; min-width: 0; }
.ow-qv__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-600, #6b7280); font-weight: 600; }
.ow-qv__eyebrow svg, .ow-qv__eyebrow i { width: 14px; height: 14px; }
.ow-qv__title { font-family: var(--font-head, inherit); font-size: 21px; font-weight: 700; margin: 6px 0 4px; line-height: 1.2; }
.ow-qv__price { font-size: 17px; font-weight: 600; color: var(--ink, #111); margin-bottom: 10px; }
.ow-qv__price del { color: var(--gray-500, #9ca3af); font-weight: 400; margin-right: 6px; }
.ow-qv__desc { font-size: 13.5px; line-height: 1.6; color: var(--gray-700, #374151); margin-bottom: 14px; }
.ow-qv__desc p { margin: 0 0 8px; }
.ow-qv__group { margin-bottom: 14px; }
.ow-qv__group-label { font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink, #111); }
.ow-qv__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ow-qv__choice { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: var(--bw, 1px) solid var(--line, #e5e7eb); border-radius: 999px; background: var(--paper, #fff); color: var(--ink, #111); cursor: pointer; font-size: 13px; transition: border-color .12s, background .12s; }
.ow-qv__choice:hover { border-color: var(--gray-400, #9ca3af); }
.ow-qv__choice.is-active { border-color: var(--ink, #111); background: var(--ink, #111); color: var(--paper, #fff); }
.ow-qv__swatch { width: 16px; height: 16px; border-radius: 50%; overflow: hidden; display: inline-block; border: 1px solid rgba(0,0,0,.12); flex: none; }
.ow-qv__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ow-qv__foot { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.ow-qv__add { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border: none; border-radius: var(--r-md, 12px); background: var(--ink, #111); color: var(--paper, #fff); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: opacity .12s; }
.ow-qv__add:hover { opacity: .9; }
.ow-qv__add svg, .ow-qv__add i { width: 16px; height: 16px; }
.ow-qv__remove { padding: 13px 15px; border: var(--bw, 1px) solid var(--line, #e5e7eb); border-radius: var(--r-md, 12px); background: var(--paper, #fff); color: var(--gray-700, #374151); cursor: pointer; font-size: 13.5px; }
.ow-qv__remove:hover { border-color: var(--ink, #111); }
.ow-qv__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); border-radius: inherit; z-index: 2; }
.ow-qv__spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--gray-200, #e5e7eb); border-top-color: var(--ink, #111); animation: ow-qv-spin .8s linear infinite; }
@keyframes ow-qv-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .ow-qv { flex-direction: column; gap: 16px; }
  .ow-qv__media { flex: none; max-width: 60%; }
}

/* CRITICAL: the loading overlay must hide when [hidden] is set. The
   .ow-qv__loading rule above sets display:flex (author origin), which beats the
   UA [hidden]{display:none} — without this override the spinner overlay stays
   pinned over the popup and blocks every click ("stuck loading"). */
.ow-qv__loading[hidden] { display: none; }

/* Quantity picker inside the quick-view popup. */
.ow-qv__qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0; }
.ow-qv__qtylabel { font-size: 13px; font-weight: 600; color: var(--ink, #111); }
.ow-qv__qty { display: inline-flex; align-items: center; gap: 2px; border: var(--bw, 1px) solid var(--line, #e5e7eb); border-radius: 999px; padding: 3px; }
.ow-qv__qty button { width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink, #111); }
.ow-qv__qty button:hover { background: var(--gray-100, #f3f3f3); }
.ow-qv__qty button svg, .ow-qv__qty button i { width: 15px; height: 15px; }
.ow-qv__qty output { min-width: 30px; text-align: center; font-weight: 700; font-size: 14.5px; font-family: var(--font-head, inherit); }