/* Raiden Shop: site-specific additions to the scoped design CSS (rs-shop.css). */

/* RaidenFinance adds a "View cart" link next to an AJAX add-to-cart button. */
.rs-shop a.added_to_cart {
	display: none !important;
}

/* Add-to-cart buttons are links here (buttons in the design). */
.rs-shop a.addToCart {
	display: inline-block;
	text-decoration: none;
}
.rs-shop a.addToCart.loading {
	opacity: .5;
	pointer-events: none;
}
.rs-shop a.addToCart.rs-added {
	background-color: #3c763d !important;
}

/* Prices come from RaidenFinance as nested spans. */
.rs-shop .price-new .amount,
.rs-shop .price-old .amount,
.rs-shop .product-price .amount {
	color: inherit;
	font: inherit;
}
.rs-shop .price-old .amount bdi {
	text-decoration: inherit;
}

/* Product photos come in any shape; the design's image boxes are square. */
.rs-shop .so-deal .product-item-container .image img,
.rs-shop .ltabs-item .product-image-container img,
.rs-shop .product-layout .product-image-container img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}
.rs-shop .home1-extra .so-extraslider .item-img-info img {
	width: 120px;
	height: 120px;
	object-fit: contain;
	background: #fff;
}

/* Page banner (user 2026-10-14), in place of the old 150px blue spacer and the design's
   breadcrumbs: the Insights pages' green banner in blue (the template's blue banner image).
   From 768px Kaju's header (122px) lies over its top, so the title starts 60px under it;
   below 768px the header sits above the banner and the template spacing applies. */
.rs-shop .rs-page-banner {
	background: url("rs-page-banner.jpg") no-repeat center, linear-gradient(45deg, #1c59f3, #00d8ff);
	background-size: cover;
	margin-bottom: 30px;
}
.rs-shop .rs-page-banner-inner {
	box-sizing: border-box;
	min-height: 310px;
	padding: 127px 15px 115px;
	text-align: center;
}
@media (min-width: 768px) {
	.rs-shop .rs-page-banner-inner {
		padding-top: 182px;
		padding-bottom: 60px;
	}
}
.rs-shop .rs-page-banner .rs-page-banner-title {
	margin: 0;
	color: #fff;
	font-family: "Exo", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
}
.rs-shop .rs-page-banner .rs-page-banner-path {
	margin-top: 16px;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	line-height: 1em;
}
.rs-shop .rs-page-banner .rs-page-banner-crumb,
.rs-shop .rs-page-banner a.rs-page-banner-crumb:hover,
.rs-shop .rs-page-banner a.rs-page-banner-crumb:focus {
	color: #fff;
}
.rs-shop .rs-page-banner a.rs-page-banner-crumb:hover {
	text-decoration: underline;
}
.rs-shop .rs-page-banner .rs-page-banner-arrow {
	display: inline-block;
	width: 3px;
	height: 5px;
	margin: 0 6px;
	vertical-align: middle;
	fill: #fff;
}

/* A floated tab item shrinks to its text; real product names are shorter
   than the design's, so let it fill its slide. */
.rs-shop .owl2-item > .ltabs-item {
	width: 100%;
}

/* Sidebar best sellers: 90px image boxes. */
.rs-shop .best-seller .item-img-info img {
	width: 90px;
	height: 90px;
	object-fit: contain;
	background: #fff;
}

/* Kaju styles its own .breadcrumbs (float, margin, uppercase floated items);
   keep the design's breadcrumb bar. */
.rs-shop .breadcrumbs {
	float: none;
}
.rs-shop .breadcrumbs li {
	float: none;
	text-transform: none;
}

/* RaidenFinance notices (added to cart, errors) in the design's alert look. */
.rs-shop .rs-notices {
	margin: 0 0 20px;
}
.rs-shop .rs-notices .raidenfinance-message,
.rs-shop .rs-notices .raidenfinance-info,
.rs-shop .rs-notices .raidenfinance-error {
	list-style: none;
	margin: 0 0 10px;
	padding: 12px 15px;
	border: 1px solid #d6e9c6;
	border-radius: 3px;
	background: #dff0d8;
	color: #3c763d;
	overflow: hidden;
}
.rs-shop .rs-notices .raidenfinance-info {
	border-color: #bce8f1;
	background: #d9edf7;
	color: #31708f;
}
.rs-shop .rs-notices .raidenfinance-error {
	border-color: #ebccd1;
	background: #f2dede;
	color: #a94442;
}
.rs-shop .rs-notices .button {
	float: right;
	margin-left: 15px;
	padding: 3px 12px;
	border-radius: 3px;
	background: #cd2122;
	color: #fff;
	text-decoration: none;
}

/* Product page: availability when sold out; RaidenFinance's own form for
   variable / grouped / external products. */
.rs-shop .stock.rs-out-of-stock {
	color: #a94442;
}
.rs-shop .rs-native-cart table.variations {
	width: 100%;
	margin-bottom: 10px;
}
.rs-shop .rs-native-cart table.variations td,
.rs-shop .rs-native-cart table.variations th {
	padding: 5px 10px 5px 0;
	vertical-align: middle;
}
.rs-shop .rs-native-cart select {
	height: 34px;
	padding: 4px 8px;
	border: 1px solid #ddd;
}
.rs-shop .rs-native-cart .single_add_to_cart_button {
	padding: 10px 25px;
	border: 0;
	border-radius: 3px;
	background: #cd2122;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}
.rs-shop .rs-native-cart .quantity input.qty {
	width: 60px;
	height: 40px;
	text-align: center;
}

/* Cart thumbnails: the design's 80px images inside a 90px .img-thumbnail. */
.rs-shop #content tbody .img-thumbnail {
	object-fit: contain;
	background: #fff;
}

/* Checkout: RaidenFinance fields in the design's form groups. */
.rs-shop .rs-hidden-switch,
.rs-shop .rs-hidden-form {
	display: none !important;
}
.rs-shop form.checkout .form-row {
	margin: 0 0 15px;
	padding: 0;
}
.rs-shop form.checkout .form-row-first,
.rs-shop form.checkout .form-row-last {
	width: 49%;
	float: left;
}
.rs-shop form.checkout .form-row-last {
	float: right;
}
.rs-shop form.checkout .form-row-wide {
	clear: both;
}
.rs-shop form.checkout .box-inner::after,
.rs-shop form.checkout #payment-new::after,
.rs-shop form.checkout .shipping_address::after {
	content: "";
	display: table;
	clear: both;
}
.rs-shop form.checkout .form-row .raidenfinance-input-wrapper {
	display: block;
}
.rs-shop form.checkout .form-row textarea.form-control {
	min-height: 120px;
}
.rs-shop form.checkout .form-row .select2-container {
	width: 100% !important;
}
.rs-shop form.checkout .form-row .select2-container .select2-selection--single {
	height: 34px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.rs-shop form.checkout .form-row .select2-container .select2-selection__rendered {
	line-height: 32px;
}
.rs-shop form.checkout .form-row.raidenfinance-invalid .form-control,
.rs-shop form.checkout .form-row.raidenfinance-invalid .select2-selection {
	border-color: #a94442;
}
.rs-shop form.checkout .form-row .required {
	color: #a94442;
	border: 0;
	text-decoration: none;
}

/* Checkout notices and errors. */
.rs-shop .raidenfinance-NoticeGroup-checkout,
.rs-shop .raidenfinance-notices-wrapper {
	margin-bottom: 15px;
}
.rs-shop .raidenfinance-NoticeGroup-checkout .raidenfinance-error,
.rs-shop .raidenfinance-notices-wrapper .raidenfinance-error,
.rs-shop .rs-coupon-notice .raidenfinance-error {
	list-style: none;
	margin: 0 0 10px;
	padding: 12px 15px;
	border: 1px solid #ebccd1;
	border-radius: 3px;
	background: #f2dede;
	color: #a94442;
}
.rs-shop .rs-coupon-notice .raidenfinance-message {
	margin: 0 0 10px;
	padding: 12px 15px;
	border: 1px solid #d6e9c6;
	border-radius: 3px;
	background: #dff0d8;
	color: #3c763d;
}

/* Checkout payment block (RaidenFinance's markup) in the design's radio look. */
.rs-shop #payment ul.payment_methods {
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}
.rs-shop #payment ul.payment_methods > li {
	margin: 0 0 8px;
	padding: 0;
}
.rs-shop #payment ul.payment_methods > li > input[type="radio"] {
	margin: 0 6px 0 0;
	vertical-align: middle;
}
.rs-shop #payment ul.payment_methods > li > label {
	display: inline;
	font-weight: 400;
	cursor: pointer;
}
.rs-shop #payment ul.payment_methods > li > label img {
	max-height: 24px;
	margin-left: 6px;
	vertical-align: middle;
}
.rs-shop #payment .payment_box {
	margin: 8px 0 4px 22px;
	padding: 10px 12px;
	border-radius: 3px;
	background: #f5f5f5;
	color: #555;
}
.rs-shop #payment .payment_box p:last-child {
	margin-bottom: 0;
}
.rs-shop #payment .place-order {
	margin: 0;
	padding: 0;
}
.rs-shop #payment .raidenfinance-privacy-policy-text {
	margin-bottom: 15px;
	font-size: 12px;
	color: #777;
}
.rs-shop #payment #place_order {
	float: none;
}

/* First / last name side by side, as in the design (its checkout CSS makes
   every .form-group of the register block full width). */
.rs-shop .so-onepagecheckout .checkout-register .form-row-first,
.rs-shop .so-onepagecheckout .checkout-register .form-row-last {
	width: 49%;
}
.rs-shop .so-onepagecheckout .checkout-cart tbody .img-thumbnail {
	width: 80px;
	object-fit: contain;
	background: #fff;
}
@media (max-width: 767px) {
	.rs-shop .so-onepagecheckout .checkout-register .form-row-first,
	.rs-shop .so-onepagecheckout .checkout-register .form-row-last {
		width: 100%;
		float: none;
	}
}

/* Account pages: RaidenFinance's own forms (address, lost password,
   downloads, payment methods) inside the design's frame. */
.rs-shop .rs-native-account .form-row {
	margin: 0 0 15px;
	padding: 0;
}
.rs-shop .rs-native-account .form-row label {
	display: block;
	margin-bottom: 5px;
	font-weight: 700;
}
.rs-shop .rs-native-account input.input-text,
.rs-shop .rs-native-account select,
.rs-shop .rs-native-account textarea {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}
.rs-shop .rs-native-account textarea {
	height: auto;
}
.rs-shop .rs-native-account .form-row-first,
.rs-shop .rs-native-account .form-row-last {
	float: left;
	width: 49%;
}
.rs-shop .rs-native-account .form-row-last {
	float: right;
}
.rs-shop .rs-native-account .form-row-wide,
.rs-shop .rs-native-account .clear {
	clear: both;
}
.rs-shop .rs-native-account .select2-container {
	width: 100% !important;
}
.rs-shop .rs-native-account .button,
.rs-shop .rs-native-account button[type="submit"] {
	display: inline-block;
	padding: 8px 20px;
	border: 0;
	border-radius: 3px;
	background: #cd2122;
	color: #fff;
	text-decoration: none;
}
.rs-shop .rs-native-account table {
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
}
.rs-shop .rs-native-account table th,
.rs-shop .rs-native-account table td {
	padding: 8px;
	border: 1px solid #ddd;
}
.rs-shop .list-box li.active > a {
	color: #cd2122;
}
.rs-shop .rs-remember label {
	font-weight: 400;
}
@media (max-width: 767px) {
	.rs-shop .rs-native-account .form-row-first,
	.rs-shop .rs-native-account .form-row-last {
		float: none;
		width: 100%;
	}
}

/* Sidebar best sellers: each item keeps its floated 90px image inside it.
   The design's items were taller than the image (title + rating + price);
   ours are shorter (no ratings, shorter names), so without this the next
   item's image slid to the right of the previous one. */
.rs-shop .best-seller .item-wrap {
	clear: both;
}
.rs-shop .best-seller .item-wrap-inner::after {
	content: "";
	display: table;
	clear: both;
}

/* Best sellers: same 15px space under the last item as between items (the image used to touch the frame). */
.rs-shop .best-seller .modcontent { padding-bottom: 15px; }

/* Screen-reader-only text (e.g. "Price range: ..." on variable products); RF's own rule is dequeued on these views. */
.rs-shop .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

/* Select arrow: the design points at image/icons/bg-selectbox.png, which it never shipped (404, no arrow).
   The second selector outranks the design's ".rs-shop .form-control" and ".rs-shop .filters-panel .form-control"
   (background none), which hid the arrow of the Sort / Show selects. */
.rs-shop select:not([multiple]),
.rs-shop select.form-control:not([multiple]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 28px;
}

/* Kaju header (with its mega menus and sticky state) above the design's "All Categories" menu, which is z-index 990.
   Desktop only: up to 992px Kaju shows its own full-screen menu (desktop nav from 993px), and the design's categories menu
   becomes a fixed off-canvas panel that must stay above the header. */
@media (min-width: 993px) {
	body.rs-shop-view .site-header { z-index: 1000; }
}

/* Product image zoom: elevateZoom puts .zoomContainer straight in <body>, above the whole page (header included),
   so it caught the pointer inside an open header menu (which closed the menu) and covered the mobile off-canvas sidebars.
   Hide it while a header menu or an off-canvas panel is open. */
body.rs-shop-view:has(#header .main-nav li:hover) .zoomContainer,
body.rs-shop-view:has(.sidebar-offcanvas.active) .zoomContainer,
body.rs-shop-view:has(.vertical-wrapper.so-vertical-active) .zoomContainer { visibility: hidden !important; pointer-events: none !important; }

/* Product page: "Back to <category>" link above the product. */
.rs-shop .rs-back-bar { margin: 0 0 15px; }
.rs-shop .rs-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px 7px 12px;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	background: #fff;
	color: #333;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: all .2s ease;
}
.rs-shop .rs-back-link .fa { font-size: 16px; color: #cd2122; transition: color .2s ease; }
.rs-shop .rs-back-link .rs-back-name { font-weight: 700; }
.rs-shop .rs-back-link:hover,
.rs-shop .rs-back-link:focus { background: #cd2122; border-color: #cd2122; color: #fff; text-decoration: none; }
.rs-shop .rs-back-link:hover .fa,
.rs-shop .rs-back-link:focus .fa { color: #fff; }

/* Shop page Hot Deals as a category-style grid (.rs-deals-grid): the countdown of the
   design's deals module, next to the title. */
.rs-shop .rs-deals-grid .head-title:after { content: ""; display: table; clear: both; }
.rs-shop .rs-deals-grid .cs-item-timer { float: right; }
.rs-shop .rs-deals-grid .cs-item-timer .Countdown-1 { float: right; padding: 5px 0 5px 22px; position: relative; }
.rs-shop .rs-deals-grid .cs-item-timer .Countdown-1:before {
	content: "\f0e2";
	font-family: fontawesome;
	position: absolute;
	font-size: 14px;
	top: 5px;
	left: 2px;
	color: #cd2122;
}
.rs-shop .rs-deals-grid .cs-item-timer .Countdown-1 .time-item {
	float: left;
	margin-left: 5px;
	font-size: 16px;
	font-weight: bold;
	color: #cd2122;
	text-transform: capitalize;
}
.rs-shop .rs-deals-grid .cs-item-timer .Countdown-1 .time-item .num-time { float: left; margin-right: 2px; }
.rs-shop .rs-deals-grid .cs-item-timer .Countdown-1 .time-item .name-time { float: left; }
/* Hot Deals keeps the shop red title (the copied category module had the CLOTHING rose until 2026-10-20). */
.rs-shop .module.home-lt1.rs-deals-grid .head-title { border-color: #cd2122; }
.rs-shop .module.home-lt1.rs-deals-grid h2.modtitle { background: #cd2122; }
.rs-shop .module.home-lt1.rs-deals-grid h2.modtitle:before { background-position: -20px -16px; width: 14px; height: 17px; top: 10px; }

/* Phones: two product cards per row everywhere (category/shop listings in grid mode; the shop
   sections and product-page sliders get 2 columns from homepage.js / product.html).
   The design's own rule makes listing items 100% wide below 481px. */
@media (max-width: 480px) {
	.rs-shop .products-category .products-list.grid { display: flex; flex-wrap: wrap; }
	.rs-shop .products-category .products-list.grid > .product-layout { width: 50%; float: none; }
	.rs-shop .products-category .products-list.grid > .product-layout { display: flex; flex-direction: column; }
	.rs-shop .products-category .products-list.grid > .product-layout .product-item-container { flex: 1 1 auto; } /* equal heights, keeping its 30px bottom margin as the row gap */
}
/* Names get two lines of room on phones, so cards side by side line up. */
@media (max-width: 478px) {
	.rs-shop .product-item-container .caption h4 { min-height: 53px; }
	.rs-shop .product-item-container .caption h4 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ===== Wide layout (2026-10-13): screens 1400px and wider =====
   Store pages get up to 1440px (20px margin each side below that) instead of the design's 1200px;
   Kaju's header (menu) and footer keep their own site-wide width on these pages (user, 2026-10-13). Laptops (1200-1399px)
   keep the design's 1200px layout. Nested design containers keep "width: auto" (more specific rule). */
@media (min-width: 1400px) {
	.rs-shop .container { width: calc(100% - 40px); max-width: 1440px; }
}
/* Wide layout, listings: 4 products per row (the design's grid is 3 per row and breaks rows with
   .clearfix elements after every 3rd product, so the grid becomes a flex row without them). */
@media (min-width: 1400px) {
	.rs-shop .products-category .products-list.grid { display: flex; flex-wrap: wrap; }
	.rs-shop .products-category .products-list.grid > .clearfix { display: none !important; }
	.rs-shop .products-category .products-list.grid > .product-layout { width: 25%; float: none; }
	.rs-shop .products-category .products-list.grid > .product-layout { display: flex; flex-direction: column; }
	.rs-shop .products-category .products-list.grid > .product-layout .product-item-container { flex: 1 1 auto; } /* equal heights, keeping its 30px bottom margin as the row gap */
}
@media (max-width: 480px) {
	.rs-shop .products-category .products-list.grid > .clearfix { display: none !important; }
}

/* Latest Blog (shop page): 3 posts per slide (designs/shop.html), each a stacked card - image on top,
   then date, title (2 lines) and excerpt (3 lines) - instead of the design's image-left/text-right
   halves, which leave the text too little room at a third of the width. */
.rs-shop .so-latest-blog .blog-external .media .content-img,
.rs-shop .so-latest-blog .blog-external .media .content-detail { width: 100%; float: none; padding-left: 0; padding-right: 0; }
.rs-shop .so-latest-blog .blog-external .media .content-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rs-shop .so-latest-blog .blog-external .media .content-detail { padding-top: 15px; }
.rs-shop .so-latest-blog .blog-external .media-heading a,
.rs-shop .so-latest-blog .blog-external .description { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.rs-shop .so-latest-blog .blog-external .media-heading a { -webkit-line-clamp: 2; }
.rs-shop .so-latest-blog .blog-external .description { -webkit-line-clamp: 3; }
/* Same card height whether a title takes one line or two (or an excerpt is short). */
.rs-shop .so-latest-blog .blog-external .media-heading { min-height: 52px; }
.rs-shop .so-latest-blog .blog-external .description { min-height: 72px; }

/* Shop sections: slider arrows. The design hid them (#so_listing_tabs_1..4 .owl2-nav {display:none}),
   so on narrower screens the products beyond the visible columns could only be dragged in. Owl itself
   shows the buttons only when a section has more columns than fit (nav: data-total > visible columns).
   The design's arrow was #e9e9e9 on white, so it gets a visible colour; hover in the shop orange. */
.rs-shop #wrapper .so-listing-tabs.so-listing-tabs .owl2-controls .owl2-nav { display: block; }
.rs-shop .so-listing-tabs .owl2-controls .owl2-nav .owl2-prev,
.rs-shop .so-listing-tabs .owl2-controls .owl2-nav .owl2-next {
	z-index: 5;
	color: #555;
	border-color: #ddd;
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.rs-shop .so-listing-tabs .owl2-controls .owl2-nav .owl2-prev:hover,
.rs-shop .so-listing-tabs .owl2-controls .owl2-nav .owl2-next:hover { background: #cd2122; border-color: #cd2122; color: #fff; }
/* The slider sits in a row with -15px side margins inside a wrapper that clips (overflow hidden),
   so at left:0 / right:0 the arrows were cut off (the left one almost entirely). */
.rs-shop .so-listing-tabs .owl2-controls .owl2-nav .owl2-prev { left: 15px; }
.rs-shop .so-listing-tabs .owl2-controls .owl2-nav .owl2-next { right: 15px; }

/* Sections with a side image (Phone Cases .home1-lt-style2: left, HOME GEAR .home1-lt-style3: right).
   The image column is exactly one product column wide (the image as wide as a product card) and the
   image reaches down to the bottom line of the last product row (the cards' 30px bottom margin is
   left out). The design hides these images below 992px. */
@media (min-width: 992px) {
	.rs-shop .module.home-lt1.home1-lt-style2 .so-listing-tabs .ltabs-wrap .wap-listing-tabs,
	.rs-shop .module.home-lt1.home1-lt-style3 .so-listing-tabs .ltabs-wrap .wap-listing-tabs { display: flex; align-items: stretch; }
	.rs-shop .module.home-lt1.home1-lt-style2 .so-listing-tabs .ltabs-wrap .wap-listing-tabs::before,
	.rs-shop .module.home-lt1.home1-lt-style2 .so-listing-tabs .ltabs-wrap .wap-listing-tabs::after,
	.rs-shop .module.home-lt1.home1-lt-style3 .so-listing-tabs .ltabs-wrap .wap-listing-tabs::before,
	.rs-shop .module.home-lt1.home1-lt-style3 .so-listing-tabs .ltabs-wrap .wap-listing-tabs::after { display: none; }
	.rs-shop .module.home-lt1.home1-lt-style2 .so-listing-tabs .ltabs-wrap .wap-listing-tabs .item-cat-image,
	.rs-shop .module.home-lt1.home1-lt-style3 .so-listing-tabs .ltabs-wrap .wap-listing-tabs .item-cat-image { float: none; display: block; flex: none; padding-bottom: 30px; }
	.rs-shop .module.home-lt1.home1-lt-style3 .so-listing-tabs .ltabs-wrap .wap-listing-tabs .item-cat-image { order: 2; }
	.rs-shop .module.home-lt1.home1-lt-style2 .so-listing-tabs .ltabs-wrap .ltabs-items-container,
	.rs-shop .module.home-lt1.home1-lt-style3 .so-listing-tabs .ltabs-wrap .ltabs-items-container { flex: none; min-width: 0; }
	/* The image is taken out of the flow, so the products alone decide the row height. */
	.rs-shop .module.home-lt1 .so-listing-tabs .wap-listing-tabs .item-cat-image > div { position: relative; height: 100%; }
	.rs-shop .module.home-lt1 .so-listing-tabs .wap-listing-tabs .item-cat-image a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
	.rs-shop .module.home-lt1 .so-listing-tabs .wap-listing-tabs .item-cat-image img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
}
/* Wide layout: 4 product columns + the image column = 5 equal columns. */
@media (min-width: 1400px) {
	.rs-shop .module.home-lt1.home1-lt-style2 .so-listing-tabs .ltabs-wrap .wap-listing-tabs .item-cat-image,
	.rs-shop .module.home-lt1.home1-lt-style3 .so-listing-tabs .ltabs-wrap .wap-listing-tabs .item-cat-image { width: 20%; }
	.rs-shop .module.home-lt1.home1-lt-style2 .so-listing-tabs .ltabs-wrap .ltabs-items-container,
	.rs-shop .module.home-lt1.home1-lt-style3 .so-listing-tabs .ltabs-wrap .ltabs-items-container { width: 80%; }
}

/* Shop page top (desktop): the slider and the two banners under it end on the category
   list's bottom line. rs-shop.js sets the heights; the images fill them (cropped). */
@media (min-width: 992px) {
	.rs-shop .slider-right.rs-top-fit .so-homeslider .item img { display: block; width: 100%; height: var(--rs-slider-h, auto); object-fit: cover; }
	.rs-shop .slider-right.rs-top-fit .home1-banner-1 .banners img { display: block; width: 100%; max-width: none; height: var(--rs-bn-h, auto); object-fit: cover; }
}

/* "Add to Quote" (includes/quote.php): products with "Price on request". */
.rs-shop .rs-price-request { white-space: nowrap; font-size: 0.85em; }
/* The design draws the cart icon as an image on longer selectors, hence !important. */
.rs-shop .btn-button.addToCart.rs-add-quote:before {
	content: "\f0f6" !important;
	background-image: none !important;
	font-family: FontAwesome !important;
	font-size: 15px !important;
	line-height: 18px !important;
	text-align: center !important;
	color: #555 !important;
}
.rs-shop .btn-button.addToCart.rs-add-quote:hover:before { color: #fff !important; }
.rs-shop .rs-add-quote.loading { opacity: 0.6; pointer-events: none; }
.rs-shop .rs-quote .rs-quote-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rs-shop .rs-quote .rs-quote-fields { max-width: 720px; margin-bottom: 20px; }
.rs-shop .rs-quote .rs-quote-sent { padding: 40px 15px 60px; text-align: center; }
.rs-shop .rs-quote .rs-quote-sent .fa { color: #2e8b57; font-size: 54px; }
.rs-shop .rs-quote .rs-quote-sent h2 { margin: 16px 0 8px; }
.rs-shop .rs-quote .rs-quote-empty { margin: 10px 0 20px; }
.rs-quote-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	max-width: calc(100% - 40px);
	padding: 14px 18px;
	border-left: 4px solid #2e8b57;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
	color: #333;
	font: 14px/1.5 "Roboto", sans-serif;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s, transform 0.3s;
}
.rs-quote-toast.is-on { opacity: 1; transform: none; }
.rs-quote-toast-error { border-left-color: #cd2122; }
.rs-quote-toast a { color: #cd2122; font-weight: 700; text-decoration: underline; }
/* Product page: a document icon in place of the design's cart icon (the button is an input, so a background image). */
.rs-shop .box-cart input.addToCart.rs-add-quote {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h8M8 9h2'/%3E%3C/svg%3E") !important;
	background-size: 16px 16px !important;
	background-repeat: no-repeat !important;
}
.rs-shop .rs-quote .buttons .btn { text-transform: uppercase; }

/* Shop page top before the design's scripts start (they load last, user 2026-10-20: the
   page jumped once they ran). The main slider already shows only its first slide, in the
   slide shape (883 x 355) and the category list its first 10 entries (so_megamenu.js
   itemver), as both look once the scripts have started. */
.rs-shop .so-homeslider:not(.owl2-loaded) > .item:nth-child(n+2) { display: none; }
.rs-shop .so-homeslider:not(.owl2-loaded) > .item img { display: block; width: 100%; height: auto; aspect-ratio: 883 / 355; object-fit: cover; }
.rs-shop .vertical-wrapper ul.megamenu > li.item-vertical:nth-child(n+11) { display: none; }

/* All Categories menu: sub categories listed under their parent name (user 2026-11-03). */
.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats { display: none; list-style: none; margin: 0; padding: 0; }
.rs-shop ul.megamenu > li.item-vertical.rs-open > ul.rs-subcats { display: block; }
/* Long lists (FOODS 33 lines) scroll inside: 8.5 lines of 29px show, the half line hints at more (user 2026-11-05). */
.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats { max-height: 247px; overflow-y: auto; overscroll-behavior: contain; }
/* Click opens / closes the list (view-shop.php rs_subcats_script()); the arrow turns up when open. */
.rs-shop ul.megamenu > li.rs-has-subcats > a { cursor: pointer; }
.rs-shop ul.megamenu > li.rs-has-subcats > a .rs-subcats-icon { position: absolute; right: 0; top: 50%; margin-top: -8px; font-size: 16px; line-height: 16px; color: #999; transition: transform .2s; }
.rs-shop ul.megamenu > li.rs-has-subcats.rs-open > a .rs-subcats-icon { transform: rotate(180deg); }
.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats > li { list-style: none; margin: 0; padding: 0; }
.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats a { display: block; margin: 0 10px 0 20px; padding: 4px 0; font-size: 13px; line-height: 20px; color: #666; text-transform: capitalize; border-bottom: 1px solid #efefef; }
.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats a::before { content: "\2013"; margin: 0 6px 0 30px; color: #999; }
/* A long name's second line starts under the first line's text, not under the dash (user 2026-11-05). */
.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats a { display: flex; align-items: flex-start; }
.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats a::before { flex: none; }
.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats a:hover { color: #cd2122; }
@media (max-width: 767px) {
	/* Phone side panel: the parent rows lose their left margin there (megamenu-style-dev). */
	.rs-shop ul.megamenu > li.item-vertical > ul.rs-subcats a { margin: 0 30px 0 0; padding: 3px 0; }
}

/* Product sections without products yet keep their place (user 2026-11-03, view-shop.php rs_shop_empty_note()). */
.rs-shop .rs-empty-section { width: 100%; flex: 1 0 100%; grid-column: 1 / -1; margin: 0; padding: 40px 15px; text-align: center; color: #999; font-size: 14px; }
/* Such a section has no product rows to set the side image's height: the image keeps its own shape. */
@media (min-width: 992px) {
	.rs-shop .rs-section-empty .module.home-lt1 .so-listing-tabs .wap-listing-tabs .item-cat-image > div { height: auto; }
	.rs-shop .rs-section-empty .module.home-lt1 .so-listing-tabs .wap-listing-tabs .item-cat-image a { position: static; }
	.rs-shop .rs-section-empty .module.home-lt1 .so-listing-tabs .wap-listing-tabs .item-cat-image img { height: auto; }
}

/* Category filter of the listing pages as a tree (user 2026-11-05, view-category.php): sub categories fold under their parent, the arrow left of the name opens / closes them. */
.rs-shop .so-filter-content-opts-container .rs-cat-kids { display: none; padding-left: 12px; }
.rs-shop .so-filter-content-opts-container .so-filter-option.rs-open + .rs-cat-kids { display: block; }
.rs-shop .so-filter-content-opts-container .rs-cat-toggle { width: 16px; margin-right: 4px; font-size: 15px; line-height: inherit; text-align: center; color: #999; cursor: pointer; transition: transform .2s; }
.rs-shop .so-filter-content-opts-container .rs-cat-toggle:hover { color: #cd2122; }
.rs-shop .so-filter-content-opts-container .rs-cat-leaf { cursor: inherit; }
.rs-shop .so-filter-content-opts-container .so-filter-option.rs-open > .so-option-container > .rs-cat-toggle { transform: rotate(90deg); }
/* Row: arrow (or its empty place, so sibling names line up), the name (long names wrap in their own column), the count. */
.rs-shop li[data-option="Categories"] .so-filter-option > .so-option-container { display: flex; align-items: flex-start; }
.rs-shop li[data-option="Categories"] .so-filter-option > .so-option-container > .option-input { flex: none; }
.rs-shop li[data-option="Categories"] .so-filter-option > .so-option-container > .rs-cat-toggle { flex: none; order: 1; }
.rs-shop li[data-option="Categories"] .so-filter-option > .so-option-container > label { flex: 1 1 auto; min-width: 0; padding-right: 6px; order: 2; overflow-wrap: break-word; }
.rs-shop li[data-option="Categories"] .so-filter-option > .so-option-container > .option-count { flex: none; order: 3; float: none; }

/* "Shop By" categories (user 2026-11-06): one open branch per level (rs-shop.js) and the list scrolls inside the menu instead of making it very long. */
.rs-shop .so_filter_wrap .modcontent li[data-option="Categories"] .so-filter-content-opts-container { max-height: min(480px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
/* Space between the counts and the list's scrollbar, and a scrollbar that is always shown (user 2026-11-06). */
.rs-shop .so_filter_wrap .modcontent li[data-option="Categories"] .so-filter-content-opts-container { padding-right: 10px; scrollbar-gutter: stable; }
.rs-shop .so_filter_wrap li[data-option="Categories"] .so-filter-content-opts-container::-webkit-scrollbar { width: 8px; }
.rs-shop .so_filter_wrap li[data-option="Categories"] .so-filter-content-opts-container::-webkit-scrollbar-track { background: #e4e4e4; border-radius: 4px; }
.rs-shop .so_filter_wrap li[data-option="Categories"] .so-filter-content-opts-container::-webkit-scrollbar-thumb { background: #777; border-radius: 4px; min-height: 40px; }
.rs-shop .so_filter_wrap li[data-option="Categories"] .so-filter-content-opts-container::-webkit-scrollbar-thumb:hover { background: #555; }
@supports not selector(::-webkit-scrollbar) { .rs-shop .so_filter_wrap .modcontent li[data-option="Categories"] .so-filter-content-opts-container { scrollbar-width: thin; scrollbar-color: #777 #e4e4e4; } }

/* Machinery products (user 2026-11-07, dsigngo-archives/machinery-import-2026-11-07): key specification under the summary, specification tables and product videos in the description. */
.rs-shop .rs-keyspec { width: 100%; margin: 15px 0 0; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.rs-shop .rs-keyspec th, .rs-shop .rs-keyspec td { padding: 7px 10px; border: 1px solid #e5e5e5; text-align: left; vertical-align: top; }
.rs-shop .rs-keyspec th { width: 45%; background: #f7f7f7; color: #333; font-size: 13px; font-weight: 600; text-transform: none; }
.rs-shop .rs-spec-table { max-width: 100%; margin: 0 0 25px; overflow-x: auto; }
.rs-shop .rs-spec-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.rs-shop .rs-spec-table th, .rs-shop .rs-spec-table td { padding: 8px 12px; border: 1px solid #e5e5e5; text-align: left; vertical-align: top; }
.rs-shop .rs-spec-table tr > :first-child { background: #f7f7f7; color: #333; font-weight: 600; }
.rs-shop .rs-spec-table p { margin: 0; }
.rs-shop .rs-video { position: relative; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; margin: 0 0 25px; }
.rs-shop .rs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }