/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 2.0.0
Description: Pentalor child theme - Base44 design system (Inter / slate-900 / teal-400 / sky-50)
Text Domain: hello-elementor-child
*/

body {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #0F172A;
	background-color: #F0F9FF;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }

/* ---- Responsive tables (size guide) ---- */
.ptl-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptl-table-scroll table { min-width: 560px; width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; }
.ptl-table-scroll th, .ptl-table-scroll td { padding: 12px 16px; border: 1px solid #E2E8F0; text-align: left; font-size: 16px; }
.ptl-table-scroll th { background: #F0F9FF; font-weight: 600; color: #0F172A; }

/* ---- WooCommerce buttons: dark navy, radius 12 ---- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce button.button.alt {
	background-color: #0F172A; color: #fff; border-radius: 12px;
	padding: 14px 28px; font-weight: 500; font-size: 16px; line-height: 1.2;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce button.button.alt:hover { background-color: #1E293B; color: #fff; }

/* ---- Product page polish ---- */
.woocommerce div.product p.price, .woocommerce div.product span.price { color: #0F172A; font-size: 1.5em; font-weight: 700; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { color: #0D9488; text-decoration: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: #2DD4BF; }
.woocommerce div.product div.images img { border-radius: 24px; }

/* ---- Design-system helpers ---- */
.ptl-pill { display: inline-flex; align-items: center; gap: 8px; background: #CCFBF1; color: #0F766E; border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 500; }
.ptl-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 24px; }
.ptl-img-round img { border-radius: 24px; }

/* ---- Product buy box (ref style) ---- */
.woocommerce div.product .product_title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #0F172A; }
.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; padding: 16px; font-size: 17px; border-radius: 12px; margin-top: 10px; }
.woocommerce div.product form.cart div.quantity .qty { height: 50px; width: 74px; border: 1px solid #E2E8F0; border-radius: 10px; text-align: center; font-size: 16px; }
.woocommerce div.product form.cart table.variations th.label { padding-top: 14px; color: #64748B; font-weight: 500; }
.woocommerce div.product div.images img { border-radius: 16px; }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; }
.woocommerce div.product div.images .flex-control-thumbs li img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border-color: #0F172A; }
.woocommerce div.product .price del { color: #94A3B8; }
.woocommerce div.product .price ins { text-decoration: none; }
.variable-items-wrapper .variable-item.color-variable-item { width: 38px; height: 38px; border-radius: 999px; box-shadow: none; border: 2px solid #E2E8F0; }
.variable-items-wrapper .variable-item.color-variable-item.selected { border-color: #0F172A; }
.variable-items-wrapper .variable-item.color-variable-item .variable-item-span-color { border-radius: 999px; }
.variable-items-wrapper .variable-item.button-variable-item { border-radius: 999px; padding: 9px 18px; height: auto; box-shadow: none; border: 1.5px solid #E2E8F0; font-size: 14px; }
.variable-items-wrapper .variable-item.button-variable-item.selected { border-color: #0F172A; background: #fff; }
.ptl-feature-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; text-align: center; color: #0F172A; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.ptl-feature-icons .ptl-fi-ic { display: flex; width: 52px; height: 52px; margin: 0 auto 6px; background: #F0F9FF; border: 1px solid #E2E8F0; border-radius: 999px; align-items: center; justify-content: center; font-size: 22px; }
@media (max-width: 480px) { .ptl-feature-icons { grid-template-columns: repeat(2, 1fr); } }

/* ptl-atc-full: stack qty above full-width ATC (ref layout) */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: block; }
.woocommerce div.product form.cart div.quantity { margin-bottom: 12px; float: none; }
.woocommerce div.product form.cart .single_add_to_cart_button { display: block; width: 100% !important; float: none; }

/* product subtitle under split title */
.woocommerce div.product .ptl-subtitle { color: #64748B; font-size: 15px; margin: 4px 0 10px; line-height: 1.5; }
.ptl-specs th { background: #F0F9FF; text-align: left; }

/* ptl-gallery-lock: fixed main-image window so thumbs never move; no hover zoom */
.woocommerce div.product div.images .flex-viewport { height: 560px !important; }
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image a { height: 560px; display: block; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%; height: 560px !important; object-fit: contain; background: #fff;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { display: none; }
@media (max-width: 767px) {
	.woocommerce div.product div.images .flex-viewport { height: 340px !important; }
	.woocommerce div.product div.images .woocommerce-product-gallery__image,
	.woocommerce div.product div.images .woocommerce-product-gallery__image a { height: 340px; }
	.woocommerce div.product div.images .woocommerce-product-gallery__image img { height: 340px !important; }
}

/* ---- v2.5: bigger title, bigger swatches, no Clear link, qty stepper ---- */
.woocommerce div.product .product_title { font-size: 40px !important; font-weight: 800 !important; color: #0F172A; letter-spacing: -0.02em; line-height: 1.15; }
@media (max-width: 767px) { .woocommerce div.product .product_title { font-size: 30px !important; } }
.variable-items-wrapper .variable-item.color-variable-item { width: 48px; height: 48px; }
.woocommerce div.product form.cart .reset_variations { display: none !important; }
.woocommerce div.product form.cart div.quantity {
	display: inline-flex; align-items: center; border: 1.5px solid #E2E8F0;
	border-radius: 12px; overflow: hidden; background: #fff;
}
.woocommerce div.product form.cart div.quantity .qty {
	border: none !important; border-radius: 0; width: 56px; height: 48px; margin: 0;
	-moz-appearance: textfield; appearance: textfield; font-weight: 600;
}
.woocommerce div.product form.cart div.quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart div.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ptl-qty-btn {
	width: 44px; height: 48px; background: #fff; border: none; font-size: 20px;
	font-weight: 600; color: #0F172A; cursor: pointer; line-height: 1;
}
.ptl-qty-btn:hover { background: #F0F9FF; }

/* swatch size: beat plugin CSS vars + inline rules */
:root { --wvs-single-product-item-width: 48px; --wvs-single-product-item-height: 48px; }
.variable-items-wrapper .variable-item.color-variable-item { width: 48px !important; height: 48px !important; }
.variable-items-wrapper .variable-item.color-variable-item .variable-item-span-color { width: 100% !important; height: 100% !important; }

/* ---- v2.6: buy-box order H1 -> price -> subtitle; bigger navy title (ref layout) ---- */
.woocommerce div.product .product_title { font-size: 44px !important; font-weight: 800 !important; color: #0F172A !important; margin-bottom: 8px; }
@media (max-width: 767px) { .woocommerce div.product .product_title { font-size: 32px !important; } }
.woocommerce div.product p.price { margin: 0 0 8px; }
.woocommerce div.product .ptl-subtitle { margin: 0 0 18px; }

/* ---- v2.7: clean buy box (ref: cozybliss) ---- */
/* divider between subtitle and options */
.woocommerce div.product .ptl-subtitle { border-bottom: 1px solid #E2E8F0; padding-bottom: 20px; margin: 0 0 22px; }
/* variations table -> stacked blocks: label row above swatches */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td { display: block; width: 100%; padding: 0; border: 0; background: none; }
.woocommerce div.product form.cart table.variations tr { margin: 0 0 20px; }
.woocommerce div.product form.cart table.variations th.label { padding: 0 0 10px; }
.woocommerce div.product form.cart table.variations th.label label { display: inline; margin: 0; color: #64748B; font-weight: 500; font-size: 16px; }
.woocommerce div.product form.cart table.variations th.label .woo-selected-variation-item-name { color: #0F172A; font-weight: 500; font-size: 16px; }
/* color swatch selected: navy ring with white gap */
.variable-items-wrapper .variable-item.color-variable-item.selected { border-color: #0F172A; box-shadow: inset 0 0 0 2px #fff; }
/* size pills: white, roomy, fully rounded */
.variable-items-wrapper { gap: 12px; }
.variable-items-wrapper .variable-item.button-variable-item { padding: 13px 26px; font-size: 15px; background: #fff; border: 1px solid #E2E8F0; }
.variable-items-wrapper .variable-item.button-variable-item.selected { border: 2px solid #0F172A; padding: 12px 25px; background: #fff; }
/* quantity: gray label + wide stepper box */
.ptl-qty-label { color: #64748B; font-weight: 500; font-size: 16px; margin: 2px 0 10px; }
.woocommerce div.product form.cart div.quantity { width: 240px; max-width: 100%; justify-content: space-between; border-radius: 16px; }
.woocommerce div.product form.cart div.quantity .qty { height: 54px; flex: 1; width: auto; }
.ptl-qty-btn { width: 64px; height: 54px; font-size: 22px; }
/* single price lives at the top only (JS swaps it in); hide duplicate above the button */
.woocommerce div.product form.cart .woocommerce-variation-price { display: none; }
/* pill add-to-cart */
.woocommerce div.product form.cart .single_add_to_cart_button { border-radius: 999px; padding: 18px; font-size: 17px; font-weight: 700; margin-top: 18px; }
/* short description relocated below the form */
.woocommerce div.product .woocommerce-product-details__short-description { color: #334155; font-size: 15px; line-height: 1.6; margin-top: 22px; }

/* ---- v2.8: one-row size pills, fixed qty stepper, green price ---- */
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { color: #16A34A; }

/* v2.9.3: fixed price size — em sizing compounded when a nested span.price is
   swapped in on variation change (1.5em × 1.5em ≈ title size) */
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 20px !important; }
.woocommerce div.product p.price .price, .woocommerce div.product p.price span.price { font-size: inherit !important; }
.woocommerce div.product p.price del { font-size: 16px; font-weight: 500; }
/* size pills always on one horizontal row (scrolls sideways if too narrow) */
ul.variable-items-wrapper.button-variable-items-wrapper { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.variable-items-wrapper .variable-item.button-variable-item { flex: 0 0 auto; padding: 11px 16px; font-size: 14px; white-space: nowrap; }
.variable-items-wrapper .variable-item.button-variable-item.selected { padding: 10px 15px; }
/* qty stepper: input may not push the plus button out of the box; buttons stay uncolored */
.woocommerce div.product form.cart div.quantity .qty { flex: 1 1 auto; min-width: 0; width: auto; }
.woocommerce div.product form.cart div.quantity .ptl-qty-btn {
	flex: 0 0 56px; width: 56px; height: 54px; background: #fff !important; color: #0F172A !important;
	border: none !important; border-radius: 0; box-shadow: none; padding: 0;
}
.woocommerce div.product form.cart div.quantity .ptl-qty-btn:hover { background: #F0F9FF !important; }

/* ---- v2.8.1: size chart — centered content, comfy spacing, card layout on mobile ---- */
.ptl-table-scroll table.ptl-size-table th,
.ptl-table-scroll table.ptl-size-table td { text-align: center; vertical-align: middle; padding: 16px 18px; line-height: 1.5; }
.ptl-table-scroll table.ptl-size-table td strong { font-size: 17px; }
.ptl-size-note { font-size: 14px; color: #64748B; margin-top: 12px; text-align: center; }
@media (max-width: 640px) {
	.ptl-table-scroll table.ptl-size-table { min-width: 0; background: none; border-radius: 0; }
	.ptl-table-scroll table.ptl-size-table thead { display: none; }
	.ptl-table-scroll table.ptl-size-table tbody,
	.ptl-table-scroll table.ptl-size-table tr,
	.ptl-table-scroll table.ptl-size-table td { display: block; width: 100%; }
	.ptl-table-scroll table.ptl-size-table tr { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
	.ptl-table-scroll table.ptl-size-table td {
		display: flex; justify-content: space-between; align-items: center; gap: 16px;
		text-align: right; padding: 11px 14px; border: 0; border-bottom: 1px solid #F1F5F9; font-size: 14.5px;
	}
	.ptl-table-scroll table.ptl-size-table tr td:last-child { border-bottom: 0; }
	.ptl-table-scroll table.ptl-size-table td::before {
		content: attr(data-label); font-weight: 600; color: #64748B; text-align: left; flex: 0 0 auto;
	}
	.ptl-table-scroll table.ptl-size-table td:first-child { background: #F0F9FF; }
	.ptl-table-scroll table.ptl-size-table td:first-child strong { font-size: 16px; }
}

/* ---- v2.9.5: header nav must stay on one line (UAE ul is flex-wrap:wrap and the
   widget shrinks, pushing the last item to a second row) ---- */
@media (min-width: 1025px) {
	.elementor-45 .elementor-element-hdrv2003 { flex-shrink: 0; }
	.elementor-45 ul.hfe-nav-menu { flex-wrap: nowrap; }
	.elementor-45 .hfe-nav-menu > li > a { white-space: nowrap; }
}

/* ---- v2.10: footer typography & rhythm (style only; structure/copy untouched) ---- */
/* section padding */
.elementor-46 .elementor-element-ftrv2001 { padding-top: 64px !important; padding-bottom: 32px !important; }
/* column headings: Support / Legal / Cool Tips — 18px/700/white, 16px below */
.elementor-46 .elementor-widget-heading .elementor-heading-title { font-size: 18px !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: 0; }
.elementor-46 .elementor-widget-heading { margin-bottom: 16px; }
.elementor-46 .ptl-sub-title { font-size: 18px !important; font-weight: 700 !important; color: #FFFFFF !important; margin: 0 0 16px !important; }
/* links under headings: smaller than headings, light slate-blue, airy, white on hover */
.elementor-46 .elementor-icon-list-item, .elementor-46 .elementor-icon-list-item a { font-size: 15px !important; line-height: 2 !important; }
.elementor-46 .elementor-icon-list-text { font-size: 15px !important; color: #A9BACC !important; transition: color .15s; }
.elementor-46 .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #FFFFFF !important; }
/* subscribe controls: 44px, slimmer button, input capped at 280px */
.elementor-46 .ptl-sub-form input[type=email] { height: 44px !important; max-width: 280px; }
.elementor-46 .ptl-sub-form .ptl-sub-btn { height: 44px !important; padding: 10px 20px !important; font-size: 15px !important; }
.elementor-46 .ptl-sub-text { font-size: 14px; }
/* brand blurb */
.elementor-46 .elementor-element-v2x0002 p { font-size: 15px !important; line-height: 1.7 !important; }
/* four columns: top-aligned */
.elementor-46 .elementor-element-v2x0028,
.elementor-46 .elementor-element-v2x0028 > .e-con-inner { align-items: flex-start; }
/* mobile: single stacked column, 32px rhythm */
@media (max-width: 767px) {
	.elementor-46 .elementor-element-v2x0028 > .e-con-inner > .e-con,
	.elementor-46 .elementor-element-v2x0028 > .e-con,
	.elementor-46 .elementor-element-v2x0034 > .e-con-inner > .e-con,
	.elementor-46 .elementor-element-v2x0034 > .e-con { width: 100% !important; }
	.elementor-46 .elementor-element-v2x0028,
	.elementor-46 .elementor-element-v2x0028 > .e-con-inner { row-gap: 32px; }
}

/* ---- v2.9.9: Fluent Forms submit button — brand navy instead of FF default blue ---- */
.fluentform .ff-btn-submit, .fluentform .ff_btn_style {
	background-color: #0F172A !important; color: #fff !important;
	border: none !important; border-radius: 12px !important;
	padding: 14px 32px !important; font-weight: 500; font-size: 16px; line-height: 1.2;
	transition: background-color .2s;
}
.fluentform .ff-btn-submit:hover, .fluentform .ff_btn_style:hover { background-color: #1E293B !important; }

/* ---- v2.9.7: mobile buy box was squeezed to 259px by stacked container
   paddings (28+10+20 per side) — slim the inner two on phones ---- */
@media (max-width: 767px) {
	.elementor-element-v2x0263, .elementor-element-v2x0126 { padding-left: 14px !important; padding-right: 14px !important; }
	.elementor-element-v2x0264, .elementor-element-v2x0127 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---- v2.9.6: mobile nav dropdown — UAE's own hide rule doesn't apply, so the
   menu rendered permanently expanded under the header. Hidden until the
   hamburger adds .menu-is-active. ---- */
@media (max-width: 1024px) {
	.elementor-45 .elementor-element-hdrv2001 { position: relative; }
	.elementor-45 nav.hfe-dropdown:not(.menu-is-active) { display: none; }
	.elementor-45 nav.hfe-dropdown.menu-is-active {
		display: block; position: absolute; left: 0; right: 0; top: 100%;
		background: #fff; z-index: 9999; box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
		border-top: 1px solid #E2E8F0;
	}
	.elementor-45 nav.hfe-dropdown.menu-is-active ul.hfe-nav-menu { display: flex; flex-direction: column; width: 100%; }
	.elementor-45 nav.hfe-dropdown.menu-is-active ul.hfe-nav-menu li { width: 100%; }
	.elementor-45 nav.hfe-dropdown.menu-is-active ul.hfe-nav-menu li a { padding: 13px 20px; border-bottom: 1px solid #F1F5F9; }
}

/* ---- v2.9.4: footer copyright typography (heading/link sizing lives in v2.10) ---- */
.elementor-46 .elementor-element-v2x0030 { font-size: 14px !important; color: #94A3B8 !important; }
.elementor-46 .elementor-element-v2x0030 * { font-size: inherit !important; color: inherit !important; }

/* ---- v2.9: top scrolling announcement bar (right-to-left marquee) ---- */
.ptl-announce { background: #0F172A; color: #fff; overflow: hidden; }
.ptl-announce-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: ptl-marquee 28s linear infinite; }
.ptl-announce:hover .ptl-announce-track { animation-play-state: paused; }
.ptl-announce-seq { display: inline-flex; }
.ptl-announce-item { display: inline-block; padding: 10px 0; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; }
.ptl-announce-item::after { content: "\2726"; color: #2DD4BF; margin: 0 28px; font-size: 11px; }
@keyframes ptl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) { .ptl-announce-item { font-size: 12.5px; padding: 8px 0; } }
@media (prefers-reduced-motion: reduce) { .ptl-announce-track { animation: none; } }

/* ---- v2.8.2: header image logo. !important beats `.elementor img{height:auto;max-width:100%}`,
   and max-width:none breaks the 0-width flex collapse. ---- */
.elementor .ptl-logo-img, .ptl-logo-img { height: 42px !important; width: auto !important; max-width: none !important; display: block; }
@media (max-width: 767px) { .elementor .ptl-logo-img, .ptl-logo-img { height: 34px !important; } }

/* v2.11.0 — Mobile size picker: 2x2 grid so all four sizes are visible at a
   glance (was a horizontally scrolling single row with XL cut off).
   button-variable-items-wrapper = the Size buttons only (color uses swatches). */
@media (max-width: 767px) {
	ul.variable-items-wrapper.button-variable-items-wrapper {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		white-space: normal !important;
		overflow: visible !important;
		padding-bottom: 0;
		width: 100%;
	}
	ul.variable-items-wrapper.button-variable-items-wrapper li.variable-item {
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		box-sizing: border-box;
	}
	ul.variable-items-wrapper.button-variable-items-wrapper li.variable-item .variable-item-span {
		white-space: nowrap;
	}
}

/* ============================================================
   v2.12.0 — Global button hover: mint (#2DD4BF) with navy text,
   reverts to each button's own resting colors on mouse-out.
   Excluded on purpose: delete/remove icons (stay red — destructive
   semantics), Stripe wallet buttons (cross-origin iframes).
   ============================================================ */

/* Smooth in/out */
.elementor-button,
button.single_add_to_cart_button,
.ptl-sticky-cta,
a.ptl-drawer-checkout,
.ptl-drawer-continue,
a.ptl-cp-checkout,
.wc-proceed-to-checkout a.checkout-button,
#place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.ff-btn-submit,
.ptl-dqty-btn,
#ptl-drawer-close,
.ptl-co-coupon button,
tr.ptl-cp-actions-row .coupon button {
	transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

/* Hover: mint background + navy text (matches the footer subscribe button) */
.elementor-button:hover,
button.single_add_to_cart_button:hover,
.ptl-sticky-cta:hover,
a.ptl-drawer-checkout:hover,
.ptl-drawer-continue:hover,
a.ptl-cp-checkout:hover,
.wc-proceed-to-checkout a.checkout-button:hover,
#place_order:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.ff-btn-submit:hover,
.ptl-dqty-btn:hover,
#ptl-drawer-close:hover,
.ptl-co-coupon button:hover,
tr.ptl-cp-actions-row .coupon button:hover {
	background: #2DD4BF !important;
	background-color: #2DD4BF !important;
	border-color: #2DD4BF !important;
	color: #0F172A !important;
}

/* ==========================================================================
   ptl-swatch-mint: hairline borders, mint selected state, round colour swatches
   --------------------------------------------------------------------------
   Two reasons this block sits at the end and leans on !important:

   1) The rules further up this file lose on specificity. The plugin wrapper
      carries .wvs-style-squared, so its rule is
        .woo-variation-swatches .wvs-style-squared.variable-items-wrapper
          .variable-item:not(.radio-variable-item)              -> (0,5,0)
      against our .variable-items-wrapper .variable-item.color-variable-item
                                                                -> (0,3,0)
      That is why `border-radius: 999px` on line 54 never took effect.

   2) The chunky outline was never a border — it was the plugin's box-shadow
      ring, fed by CSS variables whose defaults carry no colour (so they render
      black):
        --wvs-item-box-shadow           [0 0 0 1px #a8a8a8]
        --wvs-hover-item-box-shadow     [0 0 0 3px #ddd]
        --wvs-selected-item-box-shadow  [0 0 0 2px]
      The rings are switched off entirely here: border + ring stacked to 4px of
      colour on the selected item, which is what read as heavy. Selection is now
            carried by a 1px border plus colour, NOT by width.

   CORRECTION: an earlier version of this comment said "the plugin already
   stamps a white tick on the chosen colour swatch". It does not — checked in
   the DOM, there is no tick element. Selection therefore rested on #2DD4BF
   against the resting #E2E8F0, which is a contrast ratio of only 1.51:1, i.e.
   nearly invisible. The selected colour is now #0F766E (4.38:1 against the
   resting border, comfortably past the 3:1 WCAG 1.4.11 floor for non-text UI)
   with a soft outward halo for bulk. The halo is a box-shadow so it adds no
   layout size and cannot make the row twitch.

   Border width is held at 1px in every state on purpose: the old rules dropped
   the selected item's padding by 1px to compensate for a 2px border, so letting
   the width vary makes the label twitch as you click through sizes.
   ========================================================================== */

.woo-variation-swatches .variable-items-wrapper {
	--wvs-item-box-shadow: none;
	--wvs-hover-item-box-shadow: none;
	--wvs-selected-item-box-shadow: none;
}

/* Hairline in every state, no rings. */
.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item,
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item {
	border: 1px solid #E2E8F0 !important;
	box-shadow: none !important;
}

/* Colour swatches -> circular. The .wvs-style-squared selector is the one that
   actually wins; the plain one keeps working if that class ever changes. */
.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item,
.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item.color-variable-item {
	border-radius: 999px !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item .variable-item-span-color {
	border-radius: 999px !important;
}

/* Selected. Same 1px width as the resting state — only the colour changes. */
.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item.selected {
	border-color: #0F766E !important;
	/* Outward halo, not a thicker border: box-shadow is outside the box model so
	   the swatch does not change size and the row cannot shift on selection. */
	box-shadow: 0 0 0 3px rgba(15, 118, 110, .20) !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected {
	border-color: #0F766E !important;
	background-color: #F0FDFA !important;
	/* Label colour too, so selection does not depend on the 1px edge alone.
	   font-weight is deliberately NOT changed: it would alter the label width and
	   bring back the sideways scroll this block already fixed once. */
	color: #0F766E !important;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, .16) !important;
}

/* Same padding in both states. The plugin's own `padding: 2px` was out-ranking
   line 161's `11px 16px` on the resting pill while the selected pill kept the
   roomier value, so the chosen size sat ~30px wider than its neighbours and the
   row shifted on every click (m 139px vs l 106px, measured).
   Horizontal value is 8px, not 16px: the four labels measure 101/105/100/111px,
   so at 16px the row totals 616px against a 540px column and starts scrolling
   sideways. At 8px the pills sum to 485px. */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item,
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected {
	padding: 11px 8px !important;
	/* The pills carried margin:4px on top of the row's gap:12px, so the real
	   spacing was 20px and the four margins added 28px — that alone pushed the
	   row to 549px against a 540px column and triggered the sideways scroll.
	   gap already handles the spacing; the margin was double-counting it. */
	margin: 0 !important;
}

/* Below 767px the pills become a 2-column grid (line ~289), where they stretch
   to the cell and the tighter horizontal padding would look mean. */
@media (max-width: 767px) {
	.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item,
	.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected {
		padding: 11px 14px !important;
	}
}

/* Hover: darken the hairline only. No ring, no jump. */
.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item:hover,
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:hover {
	border-color: #99F6E4 !important;
}

/* Third picker: gallery thumbnails. Our own rule, no !important needed.
   Left at 2px — it frames an image rather than outlining a control. */
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	border-color: #2DD4BF;
}