/* Szmutka – swatches, quick add, notice */

:root {
	--szw-ink: #1F2A2C;
	--szw-ink-2: #5C5650;
	--szw-teal: #2A6A7A;
	--szw-teal-dark: #1F4F5B;
	--szw-paper: #FBF4EA;
	--szw-line: #E7DCCB;
	--szw-field: #CDBFA9;
	--szw-focus: #2BB7D4;
}

/* ---------- swatches ---------- */
.sz-swatch-wrap { display: flex; flex-direction: column; gap: 6px; }
.sz-swatch-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.sz-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sz-swatch { cursor: pointer; font-family: 'Jost', sans-serif; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; }
.sz-swatch:focus-visible { outline: 3px solid var(--szw-focus); outline-offset: 2px; }
button.sz-swatch { box-shadow: none; text-transform: none; letter-spacing: normal; }
button.sz-swatch.sz-swatch--label { min-height: 44px; padding: 0 18px; border: 1px solid var(--szw-field); border-radius: 999px; background: #fff; color: var(--szw-ink); font-size: 14px; font-weight: 500; line-height: 1; }
button.sz-swatch.sz-swatch--label:hover { border-color: var(--szw-teal); }
button.sz-swatch.sz-swatch--label.is-selected { background: var(--szw-teal); border-color: var(--szw-teal); color: #fff; }
button.sz-swatch.sz-swatch--color { width: 40px; height: 40px; padding: 3px; border-radius: 999px; border: 1px solid var(--szw-field); background: #fff; }
.sz-swatch--color span { display: block; width: 100%; height: 100%; border-radius: 999px; }
button.sz-swatch.sz-swatch--color:hover { border-color: var(--szw-teal); }
button.sz-swatch.sz-swatch--color.is-selected { border-color: var(--szw-teal); box-shadow: 0 0 0 2px var(--szw-teal); }
.sz-swatch.is-disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.variations .sz-current { font-weight: 400; color: var(--szw-ink-2); }

/* variation table on product page */
.elementor-widget-woocommerce-product-add-to-cart table.variations,
.woocommerce div.product form.cart table.variations { border: 0; margin: 0 0 16px; }
form.variations_form table.variations tr { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
form.variations_form table.variations th, form.variations_form table.variations td { display: block; padding: 0 !important; text-align: left; border: 0; background: none; }
form.variations_form table.variations th label { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; color: var(--szw-ink); }
form.variations_form .reset_variations { font-size: 13px; color: var(--szw-ink-2); margin-top: 6px; display: inline-block; }

/* ---------- quick add in product lists ---------- */
.sz-loop-form { margin-top: 8px; }
.sz-loop-form form.variations_form table.variations tr { margin-bottom: 10px; gap: 6px; }
.sz-loop-form form.variations_form table.variations th label { font-size: 13px; }
.sz-loop-form button.sz-swatch.sz-swatch--label { min-height: 36px; padding: 0 12px; font-size: 13px; }
.sz-loop-form button.sz-swatch.sz-swatch--color { width: 32px; height: 32px; padding: 2px; }
.sz-loop-form .reset_variations { display: none !important; }
.sz-loop-form .single_variation_wrap .woocommerce-variation-description { display: none; }
.sz-loop-form .woocommerce-variation-price .price { font-size: 15px !important; }
.sz-loop-form .woocommerce-variation-availability { font-size: 13px; }
.sz-loop-form .woocommerce-variation-add-to-cart { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sz-loop-form .quantity .qty { width: 64px; min-height: 44px; border: 1px solid var(--szw-field); border-radius: 999px; text-align: center; font-family: 'Jost', sans-serif; }
.sz-loop-form .single_add_to_cart_button { min-height: 44px; padding: 0 18px !important; border-radius: 999px !important; background: var(--szw-teal) !important; border: 1.5px solid var(--szw-teal) !important; color: #fff !important; font-family: 'Jost', sans-serif; font-size: 14px !important; font-weight: 500; flex: 1 1 auto; }
.sz-loop-form .single_add_to_cart_button:hover { background: var(--szw-teal-dark) !important; }
/* Same look as the simple products' button even before a size/colour is chosen; a click then asks for the choice. */
.sz-loop-form .single_add_to_cart_button.disabled,
.single_add_to_cart_button.disabled.wc-variation-selection-needed { opacity: 1 !important; cursor: pointer; }
.single_add_to_cart_button.loading { opacity: .6; pointer-events: none; }

/* category line + sold badge */
.sz-loop-cat { display: block; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--szw-ink-2); margin-bottom: 2px; }
li.product { position: relative; }
.sz-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; font: 500 12px/1.4 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; background: #fff; color: var(--szw-ink); }
li.product.outofstock img { filter: grayscale(.5) opacity(.75); }
a.button.sz-similar { background: transparent !important; color: var(--szw-teal) !important; border: 1.5px solid var(--szw-teal) !important; border-radius: 999px !important; }

/* ---------- filters ---------- */
.sz-filters { display: flex; flex-direction: column; gap: 28px; font-family: 'Jost', sans-serif; }
.sz-filter__title { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px !important; color: var(--szw-ink); }
.sz-filter ul { list-style: none; margin: 0; padding: 0; }
.sz-filter ul ul { padding-left: 14px; border-left: 1px solid var(--szw-line); margin: 4px 0; }
.sz-filter li { padding: 5px 0; font-size: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.sz-filter li > ul { flex-basis: 100%; }
.sz-filter a { color: var(--szw-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.sz-filter a:hover, .sz-filter .current-cat > a, .sz-filter .chosen a { color: var(--szw-teal); font-weight: 500; }
.sz-filter .count { color: var(--szw-ink-2); font-size: 14px; }
.sz-dot { display: inline-block; width: 18px; height: 18px; border-radius: 999px; box-shadow: 0 0 0 1px var(--szw-field); flex: none; }
.sz-filter .chosen .sz-dot { box-shadow: 0 0 0 2px var(--szw-teal); }
/* category tree: subcategories open with the chevron */
.sz-cat-tree li > a { flex: 1 1 auto; }
.sz-cat-tree li:not(.cat-parent) > .count { margin-right: 26px; }
.sz-cat-tree ul.children li { font-size: 14px; }
.sz-cat-tree .sz-cat-toggle { appearance: none; border: 0; background: transparent; width: 32px; height: 32px; margin: -6px -6px -6px 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--szw-ink-2); border-radius: 50%; }
.sz-cat-tree .sz-cat-toggle:hover, .sz-cat-tree .sz-cat-toggle:focus-visible { color: var(--szw-teal); }
.sz-cat-tree .sz-cat-toggle:focus-visible { outline: 2px solid #2BB7D4; outline-offset: 1px; }
.sz-cat-tree .sz-cat-toggle span { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.sz-cat-tree li.is-open > .sz-cat-toggle span { transform: translateY(2px) rotate(-135deg); }
.sz-cat-tree.is-ready li > ul.children { display: none; }
.sz-cat-tree.is-ready li.is-open > ul.children { display: block; }
@media (prefers-reduced-motion: reduce) { .sz-cat-tree .sz-cat-toggle span { transition: none; } }
.sz-filters--collapsed { border: 1px solid var(--szw-line); border-radius: 8px; padding: 0 16px; background: #fff; }
.sz-filters--collapsed summary { min-height: 48px; display: flex; align-items: center; font-weight: 500; cursor: pointer; }
.sz-filters--collapsed[open] { padding-bottom: 16px; }
.sz-filters--collapsed[open] summary { margin-bottom: 8px; }

/* category pills */
.sz-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sz-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--szw-field); border-radius: 999px; background: #fff; color: var(--szw-ink) !important; font: 500 14px/1 'Jost', sans-serif; text-decoration: none !important; }
.sz-pill:hover { border-color: var(--szw-teal); }
.sz-pill.is-active { background: var(--szw-teal); border-color: var(--szw-teal); color: #fff !important; }

/* ---------- added-to-cart notice ---------- */
.sz-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); width: min(640px, calc(100% - 32px)); z-index: 9999; background: #fff; box-shadow: 0 20px 50px rgb(31 42 44 / .25); padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; opacity: 0; transition: opacity .25s, transform .25s; font-family: 'Jost', sans-serif; color: var(--szw-ink); }
.sz-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.sz-toast[hidden] { display: none; }
.sz-toast__text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; }
.sz-toast__title { font-weight: 600; }
.sz-toast__sub { font-size: 14px; color: var(--szw-ink-2); }
.sz-toast__actions { display: flex; flex-wrap: wrap; gap: 8px; }
button.sz-toast__continue, .sz-toast__checkout { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 500 14px/1 'Jost', sans-serif; text-decoration: none; cursor: pointer; border: 1.5px solid var(--szw-teal); }
button.sz-toast__continue { background: transparent; color: var(--szw-teal); }
.sz-toast__checkout { background: var(--szw-teal); color: #fff !important; }
.sz-toast__checkout:hover { background: var(--szw-teal-dark); }

/* beat the theme/kit button styles */
.sz-toast button.sz-toast__continue { background: transparent !important; color: var(--szw-teal) !important; border: 1.5px solid var(--szw-teal) !important; padding: 0 18px !important; }
.sz-toast button.sz-toast__continue:hover { background: var(--szw-paper) !important; }
.sz-loop-form .added_to_cart, .sz-addtocart .added_to_cart { display: none !important; }

/* stock text in brand colours (WooCommerce default is green / red) */
.woocommerce .stock.in-stock, .woocommerce-variation-availability .stock.in-stock, .stock.in-stock { color: var(--szw-teal) !important; font-weight: 500; }
.woocommerce .stock.available-on-backorder, .stock.available-on-backorder { color: var(--szw-teal-dark) !important; }
.woocommerce .stock.out-of-stock, .woocommerce-variation-availability .stock.out-of-stock, .stock.out-of-stock { color: #A3402F !important; font-weight: 500; }

/* back to top */
.sz-totop { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
.sz-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.sz-totop .elementor-icon { box-shadow: 0 8px 24px rgb(31 42 44 / .25); }

/* ---------- cart & checkout ---------- */
.sz-freeship { background: #FBF4EA; border: 1px solid #F0E1CA; border-radius: 8px; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; font-family: 'Jost', sans-serif; color: var(--szw-ink); }
.sz-freeship p { margin: 0; }
.sz-freeship strong { font-weight: 600; }
.sz-freeship__bar { height: 6px; border-radius: 3px; background: #F6E6D0; overflow: hidden; }
.sz-freeship__bar i { display: block; height: 100%; background: #4090A2; transition: width .4s; }
.sz-freeship.is-done { background: #EAF3F5; border-color: #BFE3EC; }

.sz-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-family: 'Jost', sans-serif; font-size: 14px; color: var(--szw-ink-2); }
.sz-steps li { display: inline-flex; align-items: center; gap: 8px; }
.sz-steps li + li::before { content: '›'; color: #C7B299; margin-right: 4px; }
.sz-steps a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.sz-steps a:hover { color: var(--szw-teal); }
.sz-steps__n { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--szw-field); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; }
.sz-steps .is-current { color: var(--szw-ink); font-weight: 500; }
.sz-steps .is-current .sz-steps__n { background: var(--szw-teal); border-color: var(--szw-teal); color: #fff; }
.sz-steps .is-done .sz-steps__n { background: #F6E6D0; border-color: #F6E6D0; color: var(--szw-ink); }

.sz-note { margin: 0 0 16px; padding: 12px 16px; background: #FBF4EA; border-left: 0; font-size: 14px; color: var(--szw-ink-2); border-radius: 6px; }
.sz-note--gift { background: #EAF3F5; }

/* ---------- quantity stepper ---------- */
.quantity.sz-stepper { display: inline-flex !important; align-items: center; height: 44px; padding: 0 2px; border: 1px solid var(--szw-field); border-radius: 999px; background: #fff; vertical-align: middle; }
.quantity.sz-stepper input.qty { width: 36px !important; min-width: 0; height: 40px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font-family: 'Jost', sans-serif !important; font-size: 15px !important; font-weight: 500; color: var(--szw-ink) !important; -moz-appearance: textfield; appearance: textfield; }
.quantity.sz-stepper input.qty::-webkit-outer-spin-button, .quantity.sz-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity.sz-stepper input.qty:focus { outline: none; }
.quantity.sz-stepper:focus-within { border-color: var(--szw-teal); }
.quantity.sz-stepper button.sz-step { width: 36px; height: 36px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--szw-ink) !important; font: 400 20px/1 'Jost', sans-serif !important; cursor: pointer; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; min-height: 0 !important; }
.quantity.sz-stepper button.sz-step:hover { background: var(--szw-paper) !important; color: var(--szw-teal) !important; }
.quantity.sz-stepper button.sz-step:focus-visible { outline: 3px solid var(--szw-focus); outline-offset: 1px; }
.sz-loop-form .quantity.sz-stepper { height: 44px; }

/* Elementor Form: checkbox field as colour dots (.sz-swatch-field); dot colours come from includes/form-swatches.php */
.sz-swatch-field .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.sz-swatch-field .elementor-field-option { position: relative; display: inline-flex !important; margin: 0; }
.sz-swatch-field .elementor-field-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sz-swatch-field .elementor-field-option label { display: flex !important; flex-direction: column; align-items: center; gap: 8px; min-width: 56px; padding: 0; font: 400 13px/1.2 'Jost', sans-serif; color: var(--szw-ink-2); cursor: pointer; }
.sz-swatch-field .elementor-field-option label::before { content: ''; display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sz-dot, #E7DCCB); border: 1px solid rgba(31, 42, 44, .18); transition: box-shadow .15s ease; }
.sz-swatch-field .elementor-field-option input:hover + label::before { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--szw-sand, #C7B299); }
.sz-swatch-field .elementor-field-option input:checked + label { color: var(--szw-teal-dark, #1F4F5B); font-weight: 500; }
.sz-swatch-field .elementor-field-option input:checked + label::before { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--szw-teal, #2A6A7A); }
.sz-swatch-field .elementor-field-option input:focus-visible + label::before { outline: 2px solid #2BB7D4; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .sz-swatch-field .elementor-field-option label::before { transition: none; } }
