/* Product options, ONE look everywhere (quick view now, product page next): variation choices (the manager's swatch buttons), add-ons and quantity.
   Reference: the add-ons box "إضافات لأي وجبة" (rounded 8px cards, line border, pink price/selected state). */
.woocommerce .variations,.woocommerce .variations tbody,.woocommerce .variations tr,.woocommerce .variations th,.woocommerce .variations td{display:block;margin:0;padding:0;border:0!important;background:transparent!important;text-align:start}
.woocommerce .variations tr{margin-bottom:24px}
.woocommerce .variations th.label,.woocommerce .variations tr:has(.ocms-wcsw-wrap) th.label{margin-bottom:12px;font-size:15px!important;font-weight:700!important;color:var(--c-ink)}
.woocommerce .variations .ocms-wcsw-list{gap:8px!important;margin:0!important;row-gap:8px!important}
/* choice = an add-on style card */
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button{background:var(--c-white)!important;box-shadow:none!important;border:1px solid var(--c-line)!important;border-radius:8px!important;padding:9px 16px!important;color:var(--c-ink)!important;font:500 15px/1.3 Tajawal,sans-serif!important;transition:border-color .2s,background .2s,color .2s!important}
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button:hover{border-color:var(--c-primary)!important;box-shadow:none!important;color:var(--c-primary)!important}
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button[aria-pressed="true"]{border-color:var(--c-primary)!important;background:var(--c-white)!important;box-shadow:inset 0 0 0 1px var(--c-primary)!important;color:var(--c-primary)!important;font-weight:700!important}
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button:focus-visible{outline:2px solid var(--c-primary)!important;outline-offset:2px!important}
.woocommerce .variations .reset_variations{position:absolute;top:-30px;inset-inline-end:0;margin:0;padding:0;font-size:13px;line-height:1.5;color:var(--c-primary)}
.woocommerce .variations td.value{position:relative}
.woocommerce .single_variation_wrap .woocommerce-variation-price .price{font-size:20px;font-weight:700;color:var(--c-primary)}
/* quantity = the same stepper as on the cards */
.safy-qv .quantity.safy-qty{margin:0}
.safy-qv .quantity.safy-qty input.qty{width:46px;min-height:46px;padding:0;border:0;border-radius:0;background:transparent;font-size:16px}
.safy-qv .quantity.safy-qty button{width:34px;min-height:46px}
/* add to cart = the site's gradient button (8px radius, bold, 46px); not available yet = the same button, softer */
.woocommerce .single_add_to_cart_button,.safy-qv .single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:0!important;border-radius:8px!important;background:var(--grad-brand)!important;background-origin:border-box;color:var(--c-white)!important;font:700 16px Tajawal,sans-serif!important;opacity:1;box-shadow:none}
.woocommerce .single_add_to_cart_button:hover,.safy-qv .single_add_to_cart_button:hover{filter:brightness(.93);color:var(--c-white)!important}
.woocommerce .single_add_to_cart_button.disabled,.woocommerce .single_add_to_cart_button:disabled,.safy-qv .single_add_to_cart_button.disabled{opacity:.5!important;cursor:not-allowed;filter:none}
.woocommerce .single_add_to_cart_button.loading,.safy-qv .single_add_to_cart_button.loading{opacity:.75!important;pointer-events:none}
/* the popup's close button looks exactly like the cart / menu close buttons, even while focused */
.safy-qv .safy-qv__close,.safy-qv .safy-qv__close:focus,.safy-qv .safy-qv__close:active{background:var(--c-white);border-color:var(--c-line);color:var(--c-ink);box-shadow:none}
.safy-qv .safy-qv__close:hover,.safy-qv .safy-qv__close:focus-visible{background:var(--c-white);border-color:var(--c-primary);color:var(--c-primary)}
.woocommerce .variations .ocms-wcsw-list{display:flex!important;flex-wrap:wrap;gap:8px!important}
/* the price line of the chosen option is always reserved: nothing below it moves when options are chosen / cleared */
.woocommerce .single_variation_wrap .woocommerce-variation.single_variation{display:block!important;min-height:30px}
/* quick view: the chosen option's price is shown in the top price line (shop.js), so no extra reserved line under the options */
.safy-qv .woocommerce-variation-price{display:none}
.woocommerce .safy-qv .single_variation_wrap .woocommerce-variation.single_variation,.safy-qv .single_variation_wrap .woocommerce-variation.single_variation{display:block!important;min-height:0}
.safy-qv .variations tr:last-child{margin-bottom:0}
/* ===== ONE look for every product choice (variations here = the option groups of the product options plugin):
   a rounded box with the name as its legend, choices as cards in two columns, a round radio at the start of each ===== */
.woocommerce .variations tr{position:relative;margin:0 0 14px!important;padding:14px 16px!important;border:1px solid var(--c-line)!important;border-radius:14px;background:var(--c-white)!important}
.woocommerce .variations th.label,.woocommerce .variations tr:has(.ocms-wcsw-wrap) th.label{position:absolute;top:-13px;inset-inline-start:16px;margin:0!important;padding:0 8px!important;background:var(--c-white)!important;font-size:16px!important;font-weight:700!important;line-height:26px;color:var(--c-ink)}
.woocommerce .variations th.label label{font:inherit!important;color:inherit}
.woocommerce .variations td.value{padding-top:4px!important}
.woocommerce .variations .ocms-wcsw-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px!important}
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button{display:flex!important;align-items:center;justify-content:flex-start!important;gap:10px;width:100%;padding:9px 12px!important;border-radius:8px!important;text-align:start!important;font-weight:500!important;color:var(--c-ink)!important}
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button::before{content:"";flex:none;width:20px;height:20px;border:1.5px solid var(--c-line);border-radius:50%;background:var(--c-white);box-sizing:border-box}
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button[aria-pressed="true"]{border-color:var(--c-line)!important;box-shadow:none!important;background:var(--c-white)!important;color:var(--c-ink)!important;font-weight:500!important}
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button[aria-pressed="true"]::before{border-color:transparent;background:radial-gradient(circle,#fff 0 4px,transparent 4.5px),var(--grad-brand)}
.woocommerce .variations .ocms-wcsw-list .ocms-wcsw-item.ocms-wcsw-item--button:hover{border-color:var(--c-primary)!important;color:var(--c-ink)!important}
.woocommerce .variations .reset_variations{top:-12px;inset-inline-end:16px;padding:0 8px;background:var(--c-white);line-height:24px}
@media(max-width:767px){.woocommerce .variations .ocms-wcsw-list{grid-template-columns:minmax(0,1fr)}}

/* variation cards (the product options plugin draws them): same two-column radio cards as the option groups; the hidden select stays hidden */
.woocommerce .variations .spo-var__select{display:none}
.woocommerce .variations .spo-choices--var{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
@media(max-width:767px){.woocommerce .variations .spo-choices--var{grid-template-columns:minmax(0,1fr)}}
.woocommerce .variations .spo-choice{font-weight:500;color:var(--c-ink)}
.woocommerce .variations .spo-choice:hover{border-color:var(--c-primary)}
.spo-choice:not(.is-off):hover,.spo-choice:not(.is-off):has(input:focus-visible){border-color:var(--c-primary)}
.spo-choice.is-off:hover{border-color:#EADFEA;cursor:not-allowed}
/* the quick view's old rule made every label in the variations table a block: the choice cards stay flex rows */
.safy-qv .variations label.spo-choice,.woocommerce .variations label.spo-choice{display:flex;align-items:center;gap:10px;margin:0;font-size:inherit;font-weight:500}
.woocommerce .variations tr:last-child{margin-bottom:0!important}

/* every variation group has its OWN clear button (top corner of its box, like the legend); WooCommerce's single clear link is hidden */
.woocommerce .variations td.value{position:static!important}
.woocommerce .variations .reset_variations{display:none!important}
.woocommerce .variations .spo-clear{position:absolute;top:-12px;inset-inline-end:16px;z-index:1;margin:0;padding:0 8px;border:0;background:var(--c-white);color:var(--c-primary);font:500 13px/24px Tajawal,sans-serif;cursor:pointer;box-shadow:none}
.woocommerce .variations .spo-clear[hidden]{display:none}
.woocommerce .variations .spo-clear:hover,.woocommerce .variations .spo-clear:focus-visible{background:var(--c-white);color:var(--c-pink-bright);border:0}

/* variation group = fieldset + legend, built exactly like the add-ons box (same CSS in the product options plugin): the table row only carries it */
.woocommerce .variations tr{margin:0!important;padding:0!important;border:0!important;border-radius:0;background:transparent!important}
.woocommerce .variations th.label{display:none!important}
.woocommerce .variations td.value{padding:0!important}
.woocommerce .variations .spo-var.spo{display:block;margin:0 0 14px}
.woocommerce .variations tr:last-child .spo-var.spo{margin-bottom:0}
.woocommerce .variations .spo-var fieldset{position:relative;margin:0;padding:14px 16px}
.woocommerce .variations .spo-var legend{font-size:16px;line-height:24px}
.woocommerce .variations .spo-clear{top:-24px!important;line-height:24px!important}
/* the gap around the title is a padded span (a legend's own padding is not honoured in the shrink-to-fit box) */
.woocommerce .variations .spo-var legend{padding:0!important}
.woocommerce .variations .spo-var legend>span{display:inline-block;padding:0 8px}