/* =========================================================================
 * UK Shelving — Custom PDP
 * ========================================================================= */

.uks-pdp {
	--uks-navy: #142E71;
	--uks-red: #BF161C;
	--uks-border: #e3e6ee;
	--uks-muted: #6b7280;
	--matte-graphite:#434343;
	--uks-radius: 4px;
	max-width: 1396px;
	margin: 0 auto;
	padding: 16px 16px 46px 16px;
	color: #1b1f2a;
}


img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size: unset!important;}

.uks-pdp .woocommerce-breadcrumb {
	font-size: 14px;
	line-height: 20px;
	color: var(--matte-graphite);
	margin-bottom: 20px;
	font-weight: 400;
}

.uks-pdp .woocommerce-breadcrumb a{text-decoration: underline !important;}

/* ---- Top: 3 columns — gallery | variation table | sticky price/rail ------
 * The markup nests things in wrapper divs (.uks-pdp-left, .uks-pdp-varation)
 * for readability, but the add-to-cart form must stay ONE <form> (the
 * variation-matching JS looks for .single_variation_wrap inside the same
 * form as .variations) even though the table and the price/cart box need to
 * land in different visual columns. We solve that with display:contents:
 * every wrapper between the grid (.uks-pdp-top) and the form is "dissolved"
 * so the form's two children become direct grid items and can be placed in
 * whichever column they need — middle for the table, right for the price box.
 * Each column is left to size its own rows (no named grid-template-areas),
 * so the three stacks scale independently of each other's height.
 * ----------------------------------------------------------------------- */
body.single-product{background-color: #F4F5F9!important;}

.uks-pdp-top {
	display: flex;
	gap: 14px;
	align-items: start;
}
.uks-pdp-left,
.uks-pdp-varation { display: contents; }

/* .uks-pdp-left-inside { grid-column: 1; }  title + gallery + description */
.uks-config-head     { grid-column: 2; } /* "Select your configuration" heading */
.uks-pdp-right        { grid-column: 3; display: flex; flex-direction: column; gap: 16px;}

.uks-pdp-left{background-color: #FFFFFF; display: flex; flex-direction: column; width: 80%; padding: 24px; border-radius: 4px; gap: 24px; }
.uks-pdp-right{width: 20%; position: sticky; top: 200px;}
.uks-pdp-left-info{display: flex; gap: 24px;}

/* !important: the theme styles .cart.variations_form and otherwise overrides
   display:contents, which collapses the whole form into one column.
   A delivery-date plugin also wraps the table + single_variation_wrap in a
   <div data-product_id>, so we dissolve that wrapper too — otherwise it
   becomes a single grid item holding everything. */
.uks-pdp form.variations_form,
.uks-pdp form.variations_form > div[data-product_id] { display: contents !important; }
.uks-pdp .variations            { grid-column: 2 !important; margin: 0 !important; }
/* The real Woo price/cart box stays in the DOM (variation matching / swatches /
   the AJAX cart-drawer submit listener still need it) but is hidden — the
   custom box (.uks-custom-buybox) in .uks-pdp-right is what's shown instead. */
.uks-pdp .single_variation_wrap,
.uks-pdp form.cart:not(.variations_form) {
	display: none !important;
}

/* ---- Gallery ----------------------------------------------------------- */
.uks-gallery { display: flex; gap: 12px; }
.uks-gallery-thumbs-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 80px; }
.uks-gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 400px;
	overflow-y: auto;
	width: 100%;
	scrollbar-width: none;
}
.uks-gallery-thumbs::-webkit-scrollbar { display: none; }
.uks-thumb-nav {
	background: none; border: none; cursor: pointer; color: var(--uks-navy);
	font-size: 0px; line-height: 1; padding: 2px; mask-image: url(../images/slider-down-arrow.svg); -weblit-mask-image: url(../images/slider-down-arrow.svg);  
	mask-repeat: no-repeat; mask-position: center; mask-size: auto; width: 12px; height: 12px; background-color: #999999;}
.uks-thumb-nav:hover{background-color: #666666;}

.uks-thumb-nav.uks-thumb-up{transform: rotate(180deg);}

.uks-gallery-thumb {
	border: 1px solid #0000001A;
	border-radius: 0px;
	background: #fff;
	padding: 4px;
	cursor: pointer;
	width: 100%;
}
.uks-gallery-thumb:focus{outline-style: solid; outline-width: 0px; outline-color: #122a6b; }
.uks-gallery-thumb.is-active { border-color: var(--uks-navy); }
.uks-gallery-thumb img { display: block; width: 100%; height: auto; }

.uks-gallery-main {
	position: relative;
	flex: 1 1 auto;
	border: 1px solid #0000001A;
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.uks-gallery-main img { max-width: 100%; height: 350px; object-fit: contain;}
.uks-gallery-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 20px; height: 20px; border-radius: 50%;
	/* border: 1px solid var(--uks-border);  */
	background: #cccccc; color: var(--uks-navy);
	font-size: 0px; line-height: 1; cursor: pointer; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	mask-image: url(../images/slider-right-arrow.svg); -weblit-mask-image: url(../images/slider-right-arrow.svg);  mask-repeat: no-repeat; mask-position: center; mask-size: auto;
}
.uks-gallery-arrow.uks-gallery-arrow--active{background-color: #666666!important;}
.uks-gallery-arrow:hover{background: #666666;}
.uks-gallery-prev { left: 15px; transform: translateY(-50%) rotate(180deg);}
.uks-gallery-next { right: 15px; }
.uks-gallery-dots {
	position: absolute; bottom: 18px; left: 0; right: 0;
	display: flex; gap: 4px; justify-content: center;
}
.uks-gallery-dots .uks-gallery-dot {
	width: 12px; height: 12px; border-radius: 50%; border: 2px solid #00000033;
	background: #FFFFFF; cursor: pointer; padding: 0;
}

.uks-gallery-dots .uks-gallery-dot:focus{outline: 0px!important;}

.uks-gallery-dots .uks-gallery-dot.is-active { background: #999999; border: 2px solid #999999; }

/* ---- Title / description ----------------------------------------------- */
.uks-pdp-title { font-size: 24px; line-height: 1.2; margin: 0px; color: #1b1f2a; font-weight: 600; }
.uks-pdp-desc { color: #000000; font-size: 16px; line-height: 24px; margin-top: 30px; font-weight: 400;}

@media(min-width:768px){
	.uks-pdp-desc.uks-readmore.is-collapsed .uks-readmore-content{max-height: 100% !important; mask-image: none !important; overflow: visible;}
	.uks-pdp-desc .uks-readmore-toggle{display: none;}
}

@media (max-width:767px) {
	/* Clamp the short description on mobile so the Read More toggle appears
	   (desktop shows it in full — see the min-width:768px rule above). Tune
	   this height to taste. */
	.uks-pdp-left-inside .uks-pdp-desc.uks-readmore { --uks-readmore-max: 48px; }
	.uks-pdp-left-inside .uks-pdp-desc.uks-readmore.is-collapsed .uks-readmore-content {height: 48px !important;}
	.uks-pdp-left-inside .uks-pdp-desc.uks-readmore.is-expanded .uks-readmore-content {height: unset !important;}
	.uks-pdp-desc.is-expanded .uks-readmore-toggle{top: 90%;}

	.uks-gallery-main img { height: 350px;}
}

@media (max-width:420px) {
	.uks-gallery-main img {height: 300px;}
}

@media (max-width:390px) {
	.uks-gallery-main img {height: 260px;}
}

.uks-config-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
	flex-wrap: wrap;
    gap: 10px;
}
.uks-config-title { font-size: 20px; margin: 0; color: #000000CC; }
.uks-options-guide-trigger {
	background: none;
	border: none;
	color: #333333;
	cursor: pointer;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 400;
    font-family: 'Jost';
	padding: 0px;
	text-decoration: underline;
}

.uks-options-guide-trigger:focus{outline: 0px!important;}

.uks-options-guide-trigger:hover{
	color: var(--uks-navy);}

.uks-options-guide-trigger .uks-icon{display: flex; align-items: center; justify-content: center;}

.uks-info-icon { font-size: 14px; }

/* Variation attributes — WooCommerce .variations table, restyled to pills */
.uks-pdp .variations select { display: none !important; }
.uks-pdp .variations,
.uks-pdp .variations tbody { display: block; width: 100%; }
.uks-pdp .variations tr { display: block; margin-bottom: 12px; }
.uks-pdp .variations th.label,
.uks-pdp .variations td.value { display: block; width: auto; padding: 0; text-align: left; }
.uks-pdp .variations th.label label {
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 8px;
	color: #000000;
    line-height: 20px;
}
.uks-pdp .variations .reset_variations {
	display: inline-block !important;   /* always visible, matches design */
	margin-top: 20px;
	font-size: 0;                       /* hide WooCommerce's "Clear" text */
	color: #333333;
	text-decoration: none;
	border: 1px solid var(--uks-border);
	border-radius: var(--uks-radius);
	padding: 8px 35px 8px 12px;
    font-weight: 400;
	position: relative;
}
.uks-pdp .variations .reset_variations::after {
	content: "Reset All Selection";
	font-size: 16px;
}

.uks-pdp .variations .reset_variations::before {
	content: '';   
	position: absolute;
	top: 9px;
	right: 10px;
	mask-image: url(../images/reset-icon.svg); -weblit-mask-image: url(../images/reset-icon.svg);  mask-repeat: no-repeat; mask-position: center; mask-size: auto;
	background-color: #333333;
	width: 20px;
	height: 20px;
}

.uks-pdp .variations .reset_variations:hover { border-color: var(--uks-navy); color: var(--uks-navy); }

/* Variation Swatches plugin buttons (ul.button-variable-items-wrapper),
 * restyled to match the design's pills. */
.uks-pdp .woo-variation-items-wrapper .variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.uks-pdp .variable-item.button-variable-item {
	border: 1px solid #D3D3D3 !important;
	background: #fff !important;
	border-radius: var(--uks-radius) !important;
	padding: 4px 12px !important;
	margin: 0px 8px 8px 0px !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.uks-pdp .variable-item.button-variable-item:hover { border-color: var(--uks-navy) !important; }
.uks-pdp .variable-item.button-variable-item.selected,
.uks-pdp .variable-item.button-variable-item[aria-checked="true"] {
	background: var(--uks-navy) !important;
	border-color: var(--uks-navy) !important;
}
.uks-pdp .variable-item.button-variable-item.selected .variable-item-span,
.uks-pdp .variable-item.button-variable-item[aria-checked="true"] .variable-item-span {
	color: #fff !important;
}
.uks-pdp .variable-item .variable-item-span-button { font-size: 16px; padding: 0; line-height: 24px; color: #5C5C5C; font-weight: 400;}
.uks-pdp .variable-item.disabled,
.uks-pdp .variable-item.wvs-disabled-archive-term { opacity: .4 !important; }

/* ---- Price box — WooCommerce .single_variation_wrap -------------------- */
.uks-pdp .single_variation_wrap {
	position: relative;
	border: 1px solid var(--uks-border);
	border-radius: var(--uks-radius);
	padding: 18px;
}
/* Custom buy box (right column) — what customers actually see; mirrors the
   real (now hidden) box's look and sticks while the rail below it scrolls. */
.uks-custom-buybox {
	/* position: sticky;
	top: var(--uks-sticky-top, 90px); */
	border: 1px solid var(--uks-border);
	border-radius: var(--uks-radius);
	padding: 12px 12px 16px 12px;
	background-color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #00000040;
	position: relative;
}
/* "% SALE" badge, top-right of the price box */
.uks-sale-badge {position: absolute; top: 12px; right: 12px; color: #FF0000; font-size: 16px; font-weight: 600;}
.uks-price-default { font-size: 24px; font-weight: 600; line-height: 1.1; }
.uks-price-default .uks-price-from { font-size: 14px; font-weight: 400; color: #919191; display: block; }
.uks-price-default .wts-price-wrapper{display: block;}
.uks-price-default .wts-vat-text{font-size: 14px; color: #919191; font-weight: 400;}
.uks-price-default del{font-size: 16px; font-weight: 600; color: #666666;}
.uks-pdp .single_variation { margin-bottom: 8px; }
.uks-pdp .single_variation .price { font-size: 26px; font-weight: 700; }

.uks-pdp .woocommerce-variation-add-to-cart {
	display: flex; gap: 10px; align-items: stretch; margin-top: 10px; flex-wrap: wrap;
}
.uks-pdp .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; width: -webkit-fill-available; justify-content: space-between; padding: 7px 10px; gap: 10px; align-items: center;}
.uks-pdp .single_add_to_cart_button {
	flex: 1 1 auto;
	background: var(--uks-red);
	color: #fff;
	border: none;
	border-radius: var(--uks-radius);
	padding: 8px 18px;
	font-size: 20px;
	font-weight: 300;
	cursor: pointer;
	text-transform: capitalize;
    line-height: 32px;
	font-family: 'Jost';
}
.uks-pdp .single_add_to_cart_button:hover { filter: brightness(.94); }
.uks-pdp .single_add_to_cart_button.is-loading {
	opacity: .8;
	cursor: progress;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.uks-pdp .single_add_to_cart_button.is-loading::after {
	content: '';
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: uks-spin .6s linear infinite;
}
@keyframes uks-spin {
	to { transform: rotate(360deg); }
}
/* Disabled (no variation chosen yet) — greyed full-width button, matches design */
.uks-pdp .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	background: #D4DBE2;
	color: #fff;
	pointer-events: none;
	opacity: 1 !important;
}

/* Loading overlay after a configuration is chosen — covers the WHOLE buy-box
   card (price + qty + Add to Basket), not just the button, so it doesn't read
   as "already adding to basket" (client feedback). Desktop + mobile. */
.uks-pdp .uks-custom-buybox { position: relative; }
.uks-pdp .uks-custom-buybox.uks-cbb-loading { pointer-events: none; }
.uks-pdp .uks-custom-buybox.uks-cbb-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .72);
	border-radius: var(--uks-radius);
	z-index: 5;
}
.uks-pdp .uks-custom-buybox.uks-cbb-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 3px solid rgba(191, 22, 28, .25);
	border-top-color: var(--uks-red);
	border-radius: 50%;
	z-index: 6;
	animation: uks-spin .7s linear infinite;
}
/* Only ONE loader while a configuration generates — the full-card overlay
   above. Suppress WooCommerce's own blockUI loader on the swatch/variations
   area so the two don't stack (the custom AJAX add-to-cart doesn't use it). */
.uks-pdp .blockUI.blockOverlay,
.uks-pdp .blockUI.blockMsg { display: none !important; }

/* We render our own stock message, so hide Woo's variation availability text. */
.uks-pdp .woocommerce-variation-availability { display: none; }

/* Simple products — lay out qty + button like the variation add-to-cart row. */
.uks-pdp .uks-simple-purchase form.cart {
	display: flex; gap: 10px; align-items: stretch; margin: 14px 0 0; flex-wrap: wrap;
}
.uks-pdp .uks-simple-purchase form.cart .quantity { flex: 0 0 auto; }

/* Quantity stepper (− / +) wrapping the native qty input */
.uks-pdp .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #CCCCCC;
	border-radius: 0px;
	overflow: hidden;
}
.uks-pdp .quantity input.qty {
	width: 48px;
	border: none;
	text-align: center;
	background: transparent;
	-moz-appearance: textfield;
	font-size: 20px;
	font-weight: 400;
    font-family: 'Jost';
}
.uks-pdp .quantity input.qty::-webkit-outer-spin-button,
.uks-pdp .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.uks-qty-btn {
	background: none;
	border: none;
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: #000000;
}
.uks-qty-btn:hover { background: #f3f4f7; }

/* "Select your configuration" prompt — variable products, before a choice */
.uks-select-config {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	color: #D26900;
	font-size: 15px;
	font-weight: 400;
}
.uks-select-config-icon { font-size: 15px; }

/* Variable price box: hide the selected-state bits until a variation is chosen
   (simple products keep everything visible — they have no variation state). */
.uks-pdp .single_variation_wrap:not(.uks-simple-purchase):not(.uks-has-variation) .uks-stock,
.uks-pdp .single_variation_wrap:not(.uks-simple-purchase):not(.uks-has-variation) .uks-delivery,
.uks-pdp .single_variation_wrap:not(.uks-simple-purchase):not(.uks-has-variation) .woocommerce-variation-add-to-cart .quantity {
	display: none;
}
.uks-pdp .single_variation_wrap.uks-has-variation .uks-select-config { display: none; }

.uks-custom-buybox:not(.uks-has-variation) .uks-stock,
.uks-custom-buybox:not(.uks-has-variation) .uks-delivery,
.uks-custom-buybox:not(.uks-has-variation) .woocommerce-variation-add-to-cart .quantity {
	display: none;
}
.uks-custom-buybox.uks-has-variation .uks-select-config { display: none; }

.uks-stock { margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 24px;}
.uks-stock-in { display: inline-flex; align-items: center; gap: 4px; color: #1C7D45; font-size: 16px;  font-weight: 400; line-height: 24px;}
.uks-stock-in .uks-icon{display: none;}
.uks-stock-in::before {content: ""; display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 50%;background: #1C7D45;color: #fff;	font-size: 10px;
	font-weight: 700;flex: 0 0 auto;mask-image: url(../images/in-stock-ic.svg); -webkit-mask-image: url(../images/in-stock-ic.svg); mask-repeat: no-repeat; mask-size: auto; mask-position: center;}
.uks-stock-low { color: #D26900; position: relative; display: flex; gap: 4px;}
.uks-stock-low .uks-icon{display: none!important;}
.uks-stock-low:before { content: ""; display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 50%;background: #D26900;color: #fff;	font-size: 10px;
	font-weight: 700;flex: 0 0 auto;mask-image: url(../images/only-10-in-stock-ic.svg); -webkit-mask-image: url(../images/only-10-in-stock-ic.svg); mask-repeat: no-repeat; mask-size: auto; mask-position: center;}
.uks-stock-out { color: #B41E26; position: relative; display: flex; gap: 4px;}
.uks-stock-out:before { content: ""; display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 50%;background: #B41E26;color: #fff;	font-size: 10px;
	font-weight: 700;flex: 0 0 auto;mask-image: url(../images/out-of-stock-ic.svg); -webkit-mask-image: url(../images/out-of-stock-ic.svg); mask-repeat: no-repeat; mask-size: auto; mask-position: center;}
.uks-delivery { margin-top: 10px; font-size: 13px; }
.uks-delivery-label { color: var(--uks-muted); display: block; font-size: 14px; font-weight: 400; line-height: 20px;}
.uks-delivery-date { font-weight: 400; font-size: 14px; color: #000000; line-height: 20px;}

/* ---- Generic rail blocks ----------------------------------------------- */
.uks-block {
	/* border: 1px solid var(--uks-border); */
	border-radius: var(--uks-radius);
	padding: 12px 12px 16px 12px;
	background-color: #FFFFFF;
}
.uks-block-title { font-size: 16px; color: #000000; margin: 0 0 12px; line-height: 24px;}
.uks-get-in-touch .uks-block-title{margin: 0 0 2px;}

/* Why Buy / Bespoke headings double as accordion triggers on mobile; on
   desktop the button is reset to look and behave like the plain heading. */
.uks-block-acc-head {
	background: none; border: none; padding: 0; margin: 0;
	font: inherit; color: inherit; text-align: left; width: 100%;
	cursor: default;
}
@media (min-width: 768px) {
	/* Desktop never collapses these — always show the carousel regardless
	   of the accordion's open/closed state. */
	.uks-block-accordion .uks-block-acc-body[hidden] { display: block !important; }
	/* Mobile-only reorder block (see output()) — desktop keeps the original
	   .uks-pdp-right / .uks-pdp-bottom layout further down the page. */
	.uks-mobile-flow { display: none !important; }
}
.uks-git-desc { font-size: 14px; color: #666666; line-height: 20px; font-weight: 400; }
.uks-git-phone, .uks-git-email{margin: 0px;}
.uks-git-phone{margin-bottom: 5px!important;}
.uks-git-phone a, .uks-git-email a { color: #666666; text-decoration: underline!important; font-size: 16px; line-height: 24px; font-weight: 400; position: relative; padding-left: 30px;}
.uks-git-phone a:before{content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background-image: url(../images/phone-ic.svg); background-position: center; background-repeat: no-repeat; background-size: auto; }
.uks-git-email a:before{content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background-image: url(../images/email-ic.svg); background-position: center; background-repeat: no-repeat; background-size: auto; }
.uks-git-phone a:hover, .uks-git-email a:hover{color: #183C88;}

/* ---- Carousel ---------------------------------------------------------- */
.uks-carousel { overflow: hidden; position: relative; }
.uks-carousel-track { display: flex; transition: transform .3s ease; }
.uks-carousel-slide { flex: 0 0 100%; }
.uks-carousel-slide img { display: block; width: -webkit-fill-available!important; height: auto!important; border: 1px solid #E5E5E5; margin-right: 1px; object-fit: contain!important;}

/* "Why buy" slider: each slide is a title + image that change together. */
.uks-why-buy-carousel .uks-carousel-slide { display: flex; flex-direction: column; gap: 10px; }
.uks-why-buy-slide-title { font-size: 16px; line-height: 24px; color: #000000; font-weight: 400; }
.uks-why-buy-carousel .uks-carousel-slide img { width: 100%; height: auto; }

.uks-carousel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.uks-carousel-dot { width: 12px; height: 12px; border-radius: 50%; border: none; border: 2px solid #00000033; background: #FFFFFF; cursor: pointer; padding: 0; }
.uks-carousel-dot.is-active {background: #999999; border: 2px solid #999999; }
.uks-carousel-dot:focus{outline: 0px solid transparent!important;}

/* Mobile shows "Why buy" as an accordion (rendered in .uks-mobile-flow), not
   this slider — the desktop slider is hidden on mobile, so no mobile rules
   are needed here. Accordion image styling: */
.uks-why-buy.uks-block-accordion .uks-block-acc-body img { width: 100%; height: auto; display: block; }

/* ---- Bottom: tabs | recs ----------------------------------------------- */
.uks-pdp-bottom {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	margin-top: 20px;
}

/* Tabs (desktop) / Accordion (mobile) — markup interleaves each button with
   its own panel so plain source order already reads as a working accordion;
   the desktop media query below regroups the buttons into one row via flex
   `order`, with no DOM changes needed. */
.uks-tab-btn {
	background: none; border: none; padding: 10px 16px; cursor: pointer;
	font-size: 20px; color: #142E71; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: 'Jost'; font-weight: 400;
}
.uks-tab-btn.is-active { border-bottom-color: var(--uks-navy);  }
.uks-tab-btn:focus{outline: 0px !important;}
.uks-tab-panel { font-size: 14px; line-height: 1.6; }
.uks-tab-panel[hidden] { display: none !important; }

@media (min-width: 768px) {
	.uks-tabs { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 18px; }
	.uks-tabs .uks-tab-btn { order: 0; }
	.uks-tabs .uks-tab-panel { order: 1; flex: 0 0 100%; }
}

.uks-readmore { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.uks-readmore .uks-readmore-content{width: 100%;}
.uks-readmore.is-collapsed .uks-readmore-content {
	max-height: var(--uks-readmore-max, 674px)!important;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
	mask-image: linear-gradient(180deg, #000 70%, transparent);
}
[data-tab="description"] .uks-readmore .uks-readmore-content h2:first-child{display: none!important;}
.uks-readmore.is-expanded .uks-readmore-content { max-height: none; padding-top: 0px!important;}
.uks-readmore .uks-readmore-content h2{margin-top: 0px!important;}
.uks-readmore .uks-readmore-content h2, .uks-readmore .uks-readmore-content h3{margin-bottom: 8pxpx!important; font-size: 16px; font-weight: 700 !important;}
.uks-readmore .uks-readmore-content h2 span, .uks-readmore .uks-readmore-content h3 span{font-weight: 700!important;}
.uks-readmore .uks-readmore-content p, .uks-readmore .uks-readmore-content ul li{font-size: 16px; line-height: 24px; font-weight: 400; color: #333333; margin: 0px 0px 8px 0px;}
.uks-readmore-toggle {
	display: inline-flex; margin-top: 12px; background: none; border: none;
	color: var(--uks-navy); cursor: pointer; font-size: 16px; font-weight: 400; font-family: 'Jost'; padding: 0px 20px 0px 0px; position: relative;}
.uks-readmore-toggle::before{content: ''; position: absolute; top: 6px; right: 0; width: 15px; height: 12px; mask-image: url(../images/arrow_drop_down.svg); -webkit-mask-image: url(../images/arrow_drop_down.svg); 
	mask-repeat: no-repeat; mask-size: auto; mask-position: center; background-color: var(--uks-navy);}
.uks-readmore-toggle:hover{color: #000000;}
.uks-readmore-toggle:hover:before{background-color: #000000;}
.uks-readmore.is-expanded .uks-readmore-toggle::before{transform: rotate(180deg);}
.uks-readmore-toggle:focus{outline: 0px !important;}

.product-faqs .faq-question{width: 100%; text-align: left; padding:12px 40px 16px 20px; border: none; background: #F4F5F9; cursor: pointer; color: var(--uks-navy); font-size: 18px; font-weight: 400; position: relative; letter-spacing: 0.5px; font-family: 'Jost';}
.product-faqs .faq-question[aria-expanded="true"]{padding: 12px 40px 14px 20px;}
.product-faqs .faq-question::before{content: ''; position: absolute; top: 19px; right: 28px; width: 15px; height: 12px; mask-image: url(../images/arrow_drop_down.svg); -webkit-mask-image: url(../images/arrow_drop_down.svg); mask-repeat: no-repeat; mask-size: auto; mask-position: center; background-color: var(--uks-navy);}
.product-faqs .faq-question[aria-expanded="true"]::before{transform: rotate(180deg);}
.product-faqs .faq-question:focus{outline: 0px !important;}
.product-faqs .faq-answer{padding: 0px 20px 16px 20px; border: 0px solid transparent; background-color: #F4F5F9;}
.product-faqs .faq-answer p{margin: 0px!important; font-size: 14px; font-weight: 400; line-height: 24px; color: #666666;letter-spacing: 0.5px;}

.uks-tabs [data-tab="downloads"] p:first-child{padding-top: 0px; margin-top: 0px;}
.uks-tabs [data-tab="downloads"] ul:first-child{margin-top: 0px;}
.uks-tabs [data-tab="downloads"] ul:last-child, .uks-tabs [data-tab="downloads"] ul:last-child a{margin-bottom: 0px;}
.uks-tabs [data-tab="downloads"] ul{ padding: 0px!important; list-style-type: none!important;}
.uks-tabs [data-tab="downloads"] a{padding: 16px 50px 16px 24px; background-color: #F4F5F9; color:#142E71; margin-bottom: 10px; background-image: url(../images/download-ic.svg); background-repeat: no-repeat; background-size: auto; background-position: 97% 21px; display: block; font-size: 20px; line-height: 32px; font-weight: 400;}

/* Recommendations */
.uks-recs {overflow: hidden; }
.uks-recs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-right: 12px;}
.uks-recs-title { font-size: 20px; font-weight: 400; line-height: 20px; color: #000000; margin: 0; }
.uks-recs-viewall {	background: none; border: none; cursor: pointer; color: #333333; font-size: 16px; font-weight: 400; line-height: 24px; text-decoration: underline; padding: 0; font-family: 'Jost'; margin-right: 4px;}
.uks-recs-viewall:focus{outline: 0px!important;}
.uks-recs-actions { display: flex; align-items: center; gap: 8px; opacity: 1;}
.uks-recs-arrow {
	position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: none;
	background-color: #CCCCCC; font-size: 0; line-height: 1; cursor: pointer;
	mask-image: url(../images/slider-right-arrow.svg); -webkit-mask-image: url(../images/slider-right-arrow.svg);
	mask-repeat: no-repeat; mask-position: center; mask-size: 12px; opacity: 1;
}
.uks-recs-arrow.uks-recs-arrow--active{background-color: #666666; opacity: 1!important;}
.uks-recs-arrow:hover { background-color: #666666; opacity: 1!important;}
.uks-recs-prev { transform: rotate(180deg); }
@media (max-width: 767px) {
	.uks-recs-arrow { display: none; }
}
.uks-recs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.uks-recs-grid-2 { grid-template-columns: repeat(2, 1fr)!important; margin-right: 0px!important;}
/* Inline recs (cross-sell / up-sell) are a native horizontal scroll track at
   every width — the Prev/Next arrows scroll one card at a time (desktop) and
   touch swipes on mobile. This replaces the old fade-out/replace slide so the
   cards glide smoothly instead of flashing away and reappearing. */
.uks-recs-grid:not(.uks-recs-grid-2) {
	display: flex;
	grid-template-columns: none;
	margin-right: 0 !important;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.uks-recs-grid:not(.uks-recs-grid-2)::-webkit-scrollbar { display: none; }
.uks-recs-grid:not(.uks-recs-grid-2) > .uks-rec-card { flex: 0 0 calc((100% - 28px) / 3); }
/* Mobile: arrows are hidden (CSS above); the track slides on touch/swipe, ~2
   cards per view with snap. */
@media (max-width: 767px) {
	.uks-recs-grid:not(.uks-recs-grid-2) { scroll-snap-type: x mandatory; }
	.uks-recs-grid:not(.uks-recs-grid-2) > .uks-rec-card { flex: 0 0 46%; scroll-snap-align: start; scroll-snap-stop: always; }
}
.uks-recs-grid-2 img{width: 100%; height: 157px;  object-fit: contain;}
.uks-recs-grid-2 img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:unset!important;}
.uks-rec-drawer .uks-modal-panel { width: 508px; }
:where(.uks-gallery-dot.is-active) { outline-style: none !important; }
.uks-rec-card {
	border: 1px solid #E5E5E5; border-radius: var(--uks-radius);
	padding: 12px; text-decoration: none; color: inherit; display: block; box-shadow: 0px 2px 2px 0px #B4B4B499; margin-bottom: 3px;
}
.uks-rec-card:hover { border-color: var(--uks-navy); box-shadow: 0px 2px 2px 0px #6D96FF;}
.uks-rec-img{padding: 10px 0px; border-bottom: 1px solid #E5E5E5; margin-bottom: 12px;}
.uks-recs .uks-rec-img img { width: 100%; height: 157px;  object-fit: contain; }
.uks-rec-name { font-size: 16px; margin: 8px 0px 20px 0px; font-weight: 400; line-height: 24px; color: #000000; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 2;
    overflow: hidden; height: 48px;}
.uks-rec-price { font-size: 16px; font-weight: 600; color: #000000; width: 100%; position: relative;}
.uks-rec-price:before{content: ''; position: absolute; top: 17px; right: 11px; width: 15px; height: 12px; mask-image: url(../images/product-grid-box-arrow.svg); -webkit-mask-image: url(../images/product-grid-box-arrow.svg); mask-repeat: no-repeat; mask-size: auto; mask-position: center; background-color: var(--uks-navy);}
.uks-rec-price:hover:before{background-color: #000000;}
.uks-rec-price .wts-price-container{width: 100% !important; display: grid;}
.wts-price-wrapper .wts-vat-text{font-size: 14px; line-height: 19px; color: #919191; font-weight: 400; font-family: 'Jost';}



.uks-upsell{margin-top: 32px;}

/* ---- Modal ------------------------------------------------------------- */
body.uks-modal-open { overflow: hidden; }
.uks-modal { position: fixed; inset: 0; z-index: 99999; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .28s ease;}
.uks-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.uks-modal-overlay { position: absolute; inset: 0; background: rgba(20, 24, 40, .5); }
.uks-modal-panel {
	position: absolute; top: 0; right: 0; height: 100%; width: 460px; max-width: 92vw;
	background: #fff; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .35s ease-in-out;}
.uks-modal.is-open .uks-modal-panel{transform: translateX(0);}
/* closing: .is-open stays on during the exit animation so visibility stays
   "visible" (it only flips to hidden once JS drops both classes afterwards),
   while opacity/transform get overridden back to the closed position so the
   slide/fade transitions above actually get to play instead of snapping shut. */
.uks-modal.is-open.is-close { opacity: 0; pointer-events: none; }
.uks-modal.is-open.is-close .uks-modal-panel { transform: translateX(100%); }
.uks-modal-head { display: flex; align-items: center; justify-content: space-between; padding:24px 24px 16px 24px; }
.uks-modal-head h3 { margin: 0; color: #000000; font-size: 20px; font-weight: 400; margin-right: auto; }
.uks-modal-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #1b1f2a; }
.uks-modal-close:focus{outline: 0px!important;}
/* Back arrow — hidden by default; only shown when the recs drawer was opened
   from the cart drawer (JS adds .uks-modal--from-cart). */
.uks-rec-back { display: none; background: none; border: none; font-size: 32px; line-height: 1; cursor: pointer; color: #1b1f2a; padding: 0; margin-right: 15px; }
.uks-rec-back:focus{outline: 0px!important;}
.uks-modal--from-cart .uks-rec-back { display: inline-flex; margin-bottom: 7px;}
.uks-modal-body { padding: 8px 24px 24px 24px; overflow-y: auto; }

.uks-og-accordion { border-bottom: 1px solid var(--uks-border); padding: 10px 0px 20px 0px; }
.uks-og-acc-head { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 0px; position: relative;}
.uks-og-acc-head:focus{outline: 0px!important;}
.uks-og-acc-body[hidden] { display: none !important; }
.uks-og-acc-title { display: block; color: var(--uks-navy); font-size: 20px; font-weight: 400; font-family: 'Jost'; }
.uks-og-acc-sub { display: block; color: #333333; font-size: 14px; font-weight: 400; }
.uks-og-acc-body { display: flex; gap: 12px; padding-top: 12px; flex-direction: column;}
.uks-option-guid-info{gap: 12px;}
.uks-og-acc-additional{font-size: 16px; line-height: 24px; color: #333333; font-weight: 400; display: flex; flex-direction: column; gap: 12px;}
.uks-og-acc-additional .uks-og-acc-item{border: 1px solid #D4DBE2; padding: 10px!important; border-radius: 4px; display: flex; justify-content: flex-start; align-items: center; gap: 17px;}
.uks-og-acc-additional .uks-og-acc-item-img{border: 1px solid #D4DBE2; width: 69px; height: 69px; object-fit: cover;}
.uks-og-acc-additional .uks-og-acc-item-text, .uks-og-acc-additional .uks-og-acc-item-text p{font-size: 14px; line-height: 20px; color: #333333; font-weight: 400; margin: 0px;}
.uks-og-acc-img { flex: 0 0 120px; width: 120px; height: auto; border: 1px solid #D4DBE2; border-radius: var(--uks-radius); padding: 8px 6.5px;  height: 115px!important; object-fit: cover; float: left;
    margin-right: 10px; margin-bottom: 10px;}
.uks-og-acc-text { font-size: 16px; line-height: 24px; color: #333333; font-weight: 400; word-wrap: break-word;}
.uks-og-acc-text p:first-child{margin-top: 0px!important;}
.uks-og-acc-text p:last-child{margin-bottom: 0px!important;}
.uks-og-acc-head::before{content: ''; position: absolute; top: 40%; right: 0; width: 15px; height: 12px;  mask-image: url(../images/arrow_drop_down.svg); -webkit-mask-image: url(../images/arrow_drop_down.svg);
    mask-repeat: no-repeat; mask-size: auto; mask-position: center;  background-color: var(--uks-navy);}
.uks-og-acc-head[aria-expanded="true"]::before {transform: rotate(180deg);}

/* ---- Device visibility toggles ----------------------------------------- */
@media (min-width: 768px) { .uks-hide-desktop { display: none !important; } }
@media (max-width: 767px) { .uks-hide-mobile { display: none !important; } }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	/* Collapse to a single column; document order already reads naturally:
	   gallery/desc, config heading, variation table, price/cart box, rail. */
	/* .uks-pdp-top { grid-template-columns: 1fr; } */
	.uks-pdp-left-inside,
	.uks-config-head,
	.uks-pdp .variations,
	.uks-pdp .single_variation_wrap,
	.uks-pdp form.cart:not(.variations_form),
	.uks-pdp-right { grid-column: 1 !important; }
	/* No room to stick anything once everything is one column. */
	.uks-pdp .single_variation_wrap,
	.uks-pdp form.cart:not(.variations_form) { position: static; }
	.uks-pdp-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.uks-gallery { flex-direction: column-reverse; }
	.uks-gallery-thumbs-col { flex-direction: row; flex: 0 0 auto; }
	.uks-gallery-thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		flex: 1 1 auto;
	}
	/* Fixed width so thumbnails scroll horizontally instead of shrinking
	   into illegibly small squares when there are many images. */
	.uks-gallery-thumb { flex: 0 0 56px; width: 56px; }
	/* Strip is now a horizontal row — "up"/"down" become "left"/"right". */
	.uks-thumb-nav.uks-thumb-up { transform: rotate(90deg); }
	.uks-thumb-nav.uks-thumb-down { transform: rotate(-90deg); }
	.uks-recs-grid { grid-template-columns: repeat(3, 1fr); margin-right: -350px;}
}


/* New Css */
.uks-pdp-bottom .uks-pdp-tabs-col{background-color: #FFFFFF; padding: 24px;}
.uks-pdp-bottom .uks-pdp-recs-col{background-color: #FFFFFF; padding:24px 0px 24px 24px;}
.uks-pdp-varation{display: block!important; width: 50%;}
.uks-pdp-left-inside{width: 50%;}


.single-product .highlight-features{background-color: #FAF8F8; max-width: 100% !important; width: 100%;}
.single-product .highlight-features .wp-block-group{max-width: 90%;}
.single-product .highlight-features .lists{ padding: 25px 12px;}

@media(max-width:1199px){
	.uks-git-phone a, .uks-git-email a{font-size: 13px;}
	.uks-git-email a:before{top: 2px; width: 18px; height: 18px; background-size: contain;}
}

@media(max-width:1120px){
	.uks-pdp-left{width: 75%;}
	.uks-pdp-left-info{flex-direction: column;}
	.uks-pdp-right {width: 25%;}
	.uks-pdp-left-inside {width: 100%;}
	.uks-pdp-varation{width: 100%;}
}

@media(max-width:767px){
	.uks-pdp{overflow: hidden; padding: 16px 16px 33px 16px;}
	.uks-pdp-top{flex-direction: column;}
	.uks-pdp-left{width: -webkit-fill-available; gap: 12px;}
	.uks-pdp-right {width: 100%;}

	.uks-pdp-title {font-size: 24px;}

	.uks-pdp-desc .uks-readmore-toggle{display: block; position: absolute; right: 0px; background-color: #FFFFFF; padding-left: 10px; top: 11px; padding-right: 0px; text-decoration: underline;}
	.uks-pdp-desc .uks-readmore-toggle::before{display: none;}

	.single-product table tbody tr:last-child{margin-bottom: 0px!important;}

	.uks-pdp .woocommerce-variation-add-to-cart .quantity{width: auto;}
    .uks-pdp-varation{margin-top: 0px;}
    .uks-options-guide-trigger{font-size: 0px;}
	.uks-pdp .single_add_to_cart_button{padding: 8px;}
    .uks-stock{display: inline-block; vertical-align: top; margin-top: 15px;  padding-right: 14px;}
    .uks-delivery{display: inline-block;}

	/* These now render again (in the right order) inside .uks-mobile-flow —
	   hide the originals here so nothing appears twice. */
	.uks-pdp-right .uks-why-buy,
	.uks-pdp-right .uks-get-in-touch,
	.uks-pdp-bottom .uks-pdp-tabs-col,
	.uks-pdp-bottom .uks-pdp-recs-col { display: none !important; }

	/* Mobile-only reorder flow: cross-sell -> tabs -> get in touch -> upsell
	   -> Why buy (accordion), each as its own white card matching the rest of
	   the page's rail blocks. */
	.uks-mobile-flow { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
	.uks-mobile-flow > .uks-recs,
	.uks-mobile-flow > .uks-tabs,
	.uks-mobile-flow > .uks-block { background: #fff; border-radius: var(--uks-radius); padding: 16px; margin: 0; }
	.uks-mobile-flow > .uks-tabs { padding: 0; }

	/* Description / FAQs / Downloads tabs become an accordion on mobile —
	   one bordered card, rows separated by a divider rather than each row
	   being its own boxed/spaced item. */
	.uks-tabs {
		background: transparent!important;
		border-radius: var(--uks-radius);
		overflow: hidden;
	}

	.uks-pdp-bottom .uks-pdp-tabs-col{background-color:transparent;padding: 0px;}

	.uks-tabs .uks-tab-btn, .uks-block-accordion {
		width: 100%;
		display: block;
		text-align: left;
		position: relative;
		border-radius: 0;
		font-weight: 400;
		color: var(--uks-navy);
		padding: 12px; margin-bottom: 2px; font-size: 20px; background-color: #FFFFFF;border: 0px !important;
	}

	.uks-block-accordion{width: auto!important;}

	.uks-block-accordion h3{ font-size: 20px; font-weight: 400; color: var(--uks-navy);}

	/* No divider between a header and its own open content — the divider
	   moves to the bottom of the panel instead (see below). */
	.uks-tabs .uks-tab-btn:has( + .uks-tab-panel.is-active ) { border-bottom: none; }
	.uks-tabs .uks-tab-btn::before {
		content: '';
		position: absolute; top: 50%; right: 20px;
		width: 15px; height: 12px; margin-top: -6px;
		mask-image: url(../images/arrow_drop_down.svg);
		-webkit-mask-image: url(../images/arrow_drop_down.svg);
		mask-repeat: no-repeat; mask-size: auto; mask-position: center;
		background-color: var(--uks-navy);
		transition: transform .15s;
	}
	.uks-tabs .uks-tab-btn.is-active::before { transform: rotate(180deg); }
	.uks-tabs .uks-tab-panel {
		padding: 12px 12px 16px 12px;	
		background-color: #FFFFFF;
        margin-bottom: 2px;
	}
	/* Card's own border closes things off — no trailing divider needed. */
	.uks-tabs > *:last-child,
	.uks-tabs > button.uks-tab-btn:last-of-type { border-bottom: none; }

	/* Why Buy (Trustpilot) / Bespoke rail blocks become accordions too. */
	.uks-block-accordion .uks-block-title { margin: 0; }
	.uks-block-accordion .uks-block-acc-head {
		display: block;
		position: relative;
		cursor: pointer;
		padding: 4px 28px 4px 0;
	}
	.uks-block-accordion .uks-block-acc-head:focus{outline: 0px!important;}
	.uks-block-accordion .uks-block-acc-head::before {
		content: '';
		position: absolute; top: 50%; right: 0;
		width: 15px; height: 12px; margin-top: -6px;
		mask-image: url(../images/arrow_drop_down.svg);
		-webkit-mask-image: url(../images/arrow_drop_down.svg);
		mask-repeat: no-repeat; mask-size: auto; mask-position: center;
		background-color: var(--uks-navy);
		transition: transform .15s;
	}
	.uks-block-accordion .uks-block-acc-head[aria-expanded="true"]::before { transform: rotate(180deg); }
	.uks-block-accordion .uks-block-acc-body { margin-top: 12px; }
	.uks-block-accordion .uks-block-acc-body[hidden] { display: none !important; }

	.product-faqs .faq-question{padding: 12px 38px 12px 12px!important; font-size: 18px;}
	.product-faqs .faq-question::before{right: 20px!important;}
	.product-faqs .faq-answer{padding: 0px 12px 12px 12px!important;}

	/* Upsell product and crosssell product css  */
	.uks-recs.uks-crosssell{margin-right: -20px;}
	.uks-recs.uks-upsell{margin-right: -20px;}
}

@media(max-width:767px){
	.uks-git-phone a, .uks-git-email a{font-size: 16px;}
	.uks-git-email a:before{top: 0px; width: 24px; height: 24px; background-size: auto;}
	.uks-readmore.is-collapsed .uks-readmore-content{max-height: 297px!important;}
	/* Keep the JS threshold in sync with the clamp above so Show More only
	   appears when content is actually taller than the collapsed height. */
	[data-tab="description"] .uks-readmore { --uks-readmore-max: 297px !important; }
	.uks-tabs [data-tab="downloads"] a{background-position: 93% 31px;}
	.uks-gallery-next {right: 0px;}
	.uks-gallery-prev{left: 0px;}
	.uks-pdp .variable-item.button-variable-item{margin: 0px 12px 16px 0px !important;}
	.uks-pdp .variations tr {margin-bottom: 8px;}
	.uks-pdp .variations th.label label{margin-bottom: 12px;}
	.uks-trustpilot{margin-top: 5px !important; background-color: #FFFFFF; padding: 10px 15px; height: 392px; overflow: hidden;}
}

@media(max-width:480px){
	.uks-modal-panel{width: 100%; max-width: 100%; margin-top: 50px; transform: translateY(100%)!important;}
	.uks-modal-body{padding: 8px 24px 70px 24px;}

	.uks-modal.is-open.is-close .uks-modal-panel { transform: translateY(100%)!important; }
	.uks-modal.is-open .uks-modal-panel{transform: translateY(0)!important;}
}

@media(max-width:435px){
	.wa-cart-qty{max-width: 100px!important;}
	.wa-qty-input{font-size: 16px!important;}
	.wa-cart-remove{ font-size: 13px!important; padding: 4px 2px!important;}
	.wa-cart-qty-text{font-size: 13px!important;}
	.wts-price-wrapper .wts-vat-text{font-size: 11px!important;}
	.wa-cart-price{font-size: 12px!important;}
	.wa-cart-price del{font-size: 12px!important;}
	.wa-cart-remove .uks-icon svg{width: 15px!important; height: 15px!important;}
	.wa-cart-unit-price{font-size: 13px!important;}
	.wa-cart-product-actions{gap: 5px!important;}
}

@media(max-width:390px){
	.uks-recs-grid-2 {grid-template-columns: repeat(1, 1fr) !important;}
	.uks-config-title{font-size: 18px;}
}