/* Shout Swatches. Inherits the theme's font; colours via custom properties. */
.shout-sw { display: none; --sw: 44px; --sw-ink: #1d1d1b; --sw-line: #d9d6cf; --sw-on: #1d1d1b; --sw-muted: #77736b; margin: 4px 0 6px; }
.shout-sw-ready .shout-sw { display: block; }
.shout-sw-ready select[data-shout-sw] { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.shout-sw__chosen { font-size: .9em; color: var(--sw-muted); margin: 0 0 8px; }
.shout-sw__chosen [data-chosen] { color: var(--sw-ink); font-weight: 600; }
.shout-sw__group-title { font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--sw-muted); margin: 12px 0 6px; }
.shout-sw__list { display: flex; flex-wrap: wrap; gap: 8px; }
.shout-sw__opt { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--sw-ink); display: inline-flex; flex-direction: column; align-items: center; gap: 5px; line-height: 1.2; position: relative; }
.shout-sw__opt:focus { outline: none; }
.shout-sw__opt:focus-visible .shout-sw__chip, .shout-sw--buttons .shout-sw__opt:focus-visible { outline: 2px solid #2457d6; outline-offset: 2px; }

/* colour and photo swatches */
.shout-sw__chip { width: var(--sw); height: var(--sw); border-radius: 50%; background: var(--c, #eee); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); display: block; position: relative; transition: box-shadow .15s, transform .15s; overflow: hidden; }
.shout-sw__chip[data-light] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.shout-sw__chip--img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; border-radius: 0 !important; }
.shout-sw__opt:hover .shout-sw__chip { transform: scale(1.05); }
.shout-sw__opt.is-selected .shout-sw__chip { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sw-on); }
.shout-sw--swatches .shout-sw__name { font-size: .74em; max-width: calc(var(--sw) + 22px); text-align: center; color: var(--sw-muted); }
.shout-sw--swatches .shout-sw__opt.is-selected .shout-sw__name { color: var(--sw-ink); font-weight: 600; }
.shout-sw--swatches:not(.shout-sw--names) .shout-sw__opt--color .shout-sw__name,
.shout-sw--swatches:not(.shout-sw--names) .shout-sw__opt--image .shout-sw__name { display: none; }

/* size and option buttons */
.shout-sw__opt--label { min-height: 40px; padding: 8px 14px; border: 1px solid var(--sw-line); border-radius: 8px; background: #fff; flex-direction: row; font-size: .92em; transition: border-color .15s, background .15s; }
.shout-sw__opt--label:hover { border-color: var(--sw-ink); }
.shout-sw__opt--label.is-selected { border-color: var(--sw-on); box-shadow: inset 0 0 0 1px var(--sw-on); font-weight: 600; }

/* Divi draws a dropdown arrow after every span in the cell; not wanted where swatches replace the dropdown */
.shout-sw-cell span::after, .shout-sw-cell span::before { content: none !important; border: 0 !important; display: none !important; }

/* not available with the current choices / out of stock */
.shout-sw__opt.is-unavailable { opacity: .35; }
.shout-sw-cell .shout-sw__opt.is-oos .shout-sw__chip::after, .shout-sw__opt--label.is-oos::after { content: "" !important; display: block !important; position: absolute; left: 50%; top: 50%; width: 120%; height: 1.5px; background: rgba(29, 29, 27, .55); transform: translate(-50%, -50%) rotate(-45deg); }
.shout-sw__opt--label.is-oos { position: relative; overflow: hidden; color: var(--sw-muted); }
.shout-sw__opt--label.is-oos::after { width: 140%; }

/* WooCommerce's table: give the swatches room */
.variations_form.shout-sw-ready table.variations td.value { padding-top: 4px; }
.variations_form.shout-sw-ready table.variations th.label, .variations_form.shout-sw-ready table.variations td.label { vertical-align: top; padding-top: 8px; }
.variations_form.shout-sw-ready .reset_variations { display: inline-block; margin-top: 6px; font-size: .85em; }
@media (max-width: 600px) { .shout-sw { --sw: 40px; } .shout-sw__list { gap: 7px; } }

/* Addonify Quick View styles every button in its pop-up as a big filled button; put the swatches back. */
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw .shout-sw__list button.shout-sw__opt,
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw .shout-sw__list button.shout-sw__opt:hover,
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw .shout-sw__list button.shout-sw__opt:focus { display: inline-flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 5px; width: auto; height: auto; padding: 0; margin: 0; background: none; background-color: transparent; border: 0; border-radius: 0; color: var(--sw-ink); fill: currentColor; font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: 1.2; text-transform: none; transition: none; }
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw .shout-sw__list button.shout-sw__opt--label,
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw .shout-sw__list button.shout-sw__opt--label:hover,
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw .shout-sw__list button.shout-sw__opt--label:focus { flex-direction: row; min-height: 40px; padding: 8px 14px; border: 1px solid var(--sw-line); border-radius: 8px; background: #fff; font-size: .92em; }
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw .shout-sw__list button.shout-sw__opt--label:hover { border-color: var(--sw-ink); }
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw .shout-sw__list button.shout-sw__opt--label.is-selected { border-color: var(--sw-on); box-shadow: inset 0 0 0 1px var(--sw-on); font-weight: 600; }
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw--swatches:not(.shout-sw--names) .shout-sw__opt--color .shout-sw__name,
#addonify-quick-view-modal .woocommerce .product .summary .shout-sw--swatches:not(.shout-sw--names) .shout-sw__opt--image .shout-sw__name { display: none; }