/**
 * Mobile optimisation, to the client's sheet of 12 Aug 2026.
 *
 * Everything here is inside a max-width query: the sheet notes the desktop view
 * is fine, so nothing below 992px-wide screens should reach it.
 *
 * Loaded after the theme and after the header's own inline <style>, which is
 * why several rules need to out-specify `.header_7 ...` selectors rather than
 * simply restate them.
 */

@media (max-width: 991px) {

	/* --- 0. No sideways scrolling ---------------------------------------- */

	/*
	 * A single element wider than the screen makes the whole page scroll
	 * sideways, and the symptom shows up somewhere else entirely - headings
	 * clipped on the left, because the viewport is offset.
	 *
	 * `clip` rather than `hidden`: hidden turns the element into a scroll
	 * container, which silently breaks position: sticky on anything inside it.
	 * The full-width app pages are excluded - the configurators manage their
	 * own overflow.
	 */
	body:not(.cabina-app-page) #main,
	body:not(.cabina-app-page) .site-content {
		overflow-x: clip;
		max-width: 100vw;
	}

	/*
	 * Media cannot exceed its column.
	 *
	 * A <video> with no width cap renders at its intrinsic size - the files here
	 * are far wider than a phone - so it pushed the page sideways. Because the
	 * page then scrolled, headings in completely unrelated blocks appeared
	 * clipped on the left: MADE IN QATAR, SLIM VS CLASSIC, KITCHEN LAYOUTS. The
	 * padding in those blocks was never the problem; this was.
	 *
	 * Images are capped too, since the same applies to any oversized upload.
	 */
	body:not(.cabina-app-page) video,
	body:not(.cabina-app-page) iframe,
	body:not(.cabina-app-page) .elementor-video,
	body:not(.cabina-app-page) .entry-content img {
		max-width: 100%;
		height: auto;
	}

	/* --- 1. Header ------------------------------------------------------- */

	/*
	 * The top bar was breaking onto two lines because the row switched to
	 * `display: block`, stacking the socials above the contact details. One
	 * flex row, wrapping only if it genuinely cannot fit.
	 */
	.header_7 .header7-top-row {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 0 !important;
		min-height: 34px;
	}

	.header_7 .header7-social-col,
	.header_7 .header7-contact-col {
		width: auto;
		padding: 0;
		float: none;
	}

	.header_7 .header7-social,
	.header_7 .header7-contact {
		justify-content: flex-start !important;
		flex-wrap: nowrap;
		gap: 12px !important;
		margin-top: 0 !important;
	}

	.header_7 .header7-contact {
		justify-content: flex-end !important;
	}

	.header_7 .header7-social a,
	.header_7 .header7-contact a {
		gap: 4px;
		font-size: 11px;
		line-height: 34px;
		white-space: nowrap;
	}

	/*
	 * Account / search / cart were hidden below 992px by `hidden-sm hidden-xs`
	 * on their column, which is why they disappeared entirely on a phone. The
	 * class is gone from the template; this lays the row out as
	 * logo | actions | menu button.
	 */
	.header_7 .header-center {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.header_7 .header7-logo-col {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}

	.header_7 .header7-actions-col {
		order: 2;
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		justify-content: flex-end;
		width: auto;
		/* Clear of the menu button - at 4px the cart was touching it. */
		padding-right: 16px;
	}

	.header_7 .header7-menu-col {
		order: 3;
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: flex-end;
		width: auto;
		padding-left: 0;
	}

	.header_7 .header7-actions {
		display: inline-flex;
		align-items: center;
		gap: 18px;
		margin: 0;
	}

	/*
	 * The three icons come from different widgets - a plain link, a Bootstrap
	 * dropdown and the mini-cart - and each brought its own line-height and
	 * margins, so they sat at slightly different heights. Giving every one the
	 * same box and centring its contents lines them up on a single axis.
	 */
	.header_7 .header7-actions > .inline,
	.header_7 .header7-actions .user-guest,
	.header_7 .header7-actions .icon-search,
	.header_7 .header7-actions .icon_mini-cart,
	.header_7 .header7-actions .icon-search .dropdown,
	.header_7 .header7-actions .modus-cart {
		display: inline-flex !important;
		align-items: center;
		height: 30px;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1 !important;
		float: none !important;
	}

	.header_7 .header7-actions a,
	.header_7 .header7-actions button {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		height: 30px;
		line-height: 1 !important;
	}

	/* The menu button matches that box, so all four sit on the same centre. */
	.header_7 .mini-cart.hidden-lg.hidden-md,
	.header_7 .mini-cart .menu-button {
		display: inline-flex;
		align-items: center;
		margin: 0;
	}

	.header_7 .btn-responsive-nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 30px;
		padding: 0;
		line-height: 1;
	}

	.header_7 .header7-actions .inline,
	.header_7 .header7-actions .user-guest,
	.header_7 .header7-actions .icon-search,
	.header_7 .header7-actions .icon_mini-cart,
	.header_7 .header7-actions .modus-cart {
		position: relative;
		display: inline-flex;
		align-items: center;
		margin: 0;
	}

	.header_7 .header7-actions button,
	.header_7 .header7-actions .dropdown-toggle,
	.header_7 .header7-actions .user-guest > a,
	.header_7 .header7-actions .modus-cart button {
		width: 22px;
		height: 30px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #232427;
	}

	.header_7 .header7-actions i {
		margin-right: 0 !important;
		font-size: 18px;
	}

	/* The running total is desktop-only; on a phone the badge carries it. */
	.header_7 .header7-actions .modus_total {
		display: none;
	}

	/* Anchored to the icon box, which is now a fixed 30px, so the badge no
	   longer drags the cart out of line with its neighbours. */
	.header_7 .header7-actions .cart-num {
		position: absolute;
		right: -7px;
		top: 0;
		min-width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #ff9800;
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		line-height: 14px;
		text-align: center;
		pointer-events: none;
	}

	/*
	 * The account icon is a plain link on a touch screen.
	 *
	 * The theme hides its sign-in panel with opacity/visibility and reveals it
	 * on :hover. A touch device fires an emulated hover on the first tap, so
	 * that tap opened the panel instead of following the link - which is why
	 * the button appeared to do nothing. There is no second tap to "click"
	 * through, and the panel then covered what was beneath it.
	 *
	 * Hiding the panel outright below this width gives the icon one job: go to
	 * My Account, which routes to Login when signed out.
	 */
	.header_7 .header7-actions .login-popup,
	.header_7 .user-guest:hover .login-popup,
	.header_7 .user-guest .login-popup {
		display: none !important;
	}

	/*
	 * The link also has to be able to receive the tap. It was computing
	 * pointer-events: none, so the tap landed on the wrapper behind it and
	 * nothing happened - the icon looked dead. Asserted here rather than
	 * chased upstream: on a touch screen this link always wants the tap.
	 */
	.header_7 .header7-actions .user-guest > a,
	.header_7 .header7-actions .user-guest > a i,
	.header_7 .header7-actions .user-guest {
		pointer-events: auto !important;
	}

	.header_7 .header7-actions .user-guest > a {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* Any remaining panel stays inside the screen. */
	.header_7 .header7-actions .dropdown-menu {
		left: auto;
		right: 0;
		max-width: calc(100vw - 30px);
	}

	.header_7 .logo_home img,
	.header_7 .logo img {
		max-height: 30px;
	}

	/* --- 2. Footer ------------------------------------------------------- */

	/*
	 * The footer ran edge to edge with its headings and links hard against the
	 * left side. Padding on all four sides, and the columns given room to
	 * breathe between them.
	 */
	/*
	 * Same story as the page body: the footer nests container inside container,
	 * each contributing its own padding, so the logo, the INFORMATION links and
	 * the NEWSLETTER block all started at different places - measured at 72px,
	 * 57px and 42px on one screen.
	 *
	 * Flatten every level, then apply the gutter once at the top so the footer
	 * lines up with the header and the page content above it.
	 */
	.thim-ekit__footer .e-con,
	.thim-ekit__footer .e-con-inner,
	.thim-ekit__footer .elementor-container,
	.thim-ekit__footer .elementor-widget,
	.thim-ekit__footer .elementor-widget-container,
	#colophon .container,
	.site-footer-el .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.thim-ekit__footer .elementor > .e-con.e-parent,
	.thim-ekit__footer__inner > .elementor > .e-con,
	#colophon > .container,
	.site-footer-el > .container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* The logo widget is width-constrained, so without this it centres itself
	   in the column instead of sitting on the gutter with everything else. */
	.thim-ekit__footer .thim-ekit-site-logo,
	.thim-ekit__footer .elementor-widget__width-initial {
		margin-left: 0 !important;
		margin-right: auto !important;
		text-align: left !important;
	}

	.thim-ekit__footer .thim-ekit-site-logo a {
		display: inline-block;
		padding-left: 0 !important;
	}

	.thim-ekit__footer,
	#colophon,
	.site-footer-el {
		padding-top: 28px;
		padding-bottom: 22px;
	}

	/*
	 * The footer logo was rendering at its full desktop width, which on a phone
	 * filled most of the first screen of the footer before a single link came
	 * into view. Capped, and centred on the gutter rather than the column.
	 */
	/*
	 * Targeted on the image itself, not on a widget wrapper: the logo is output
	 * as a bare <img class="attachment-full size-full"> with none of Elementor's
	 * usual widget classes around it, so wrapper-based selectors never matched.
	 * It is the only image in the footer.
	 *
	 * The source is 864x800, which is why it filled most of the first screen.
	 */
	/*
	 * !important is doing real work here. Elementor writes a per-element rule
	 * for this widget - `.elementor-4844 .elementor-element.elementor-element-
	 * 72c7599 img` - at specificity 0,3,1, which beat a plain descendant
	 * selector. The same thing hid the FAQ heading sizes earlier.
	 *
	 * The logo sits at:
	 *   .thim-ekit__footer > … > .elementor-widget-container > .thim-ekit-site-logo > a > img
	 * and its source is 864x800, so unconstrained it filled the first screen of
	 * the footer before a single link appeared.
	 */
	/*
	 * The widget itself is what carries the size. Elementor writes
	 *   .elementor-4844 .elementor-element.elementor-element-72c7599 {
	 *       width: var(--container-widget-width, 71.262%); max-width: 71.262%; }
	 * so the logo takes 71% of the footer width whatever the image does. The
	 * custom property has to be reset too, or it feeds straight back into the
	 * width. Capping the image alone left the wrapper still reserving the space.
	 */
	.thim-ekit__footer .elementor-widget__width-initial,
	.thim-ekit__footer .thim-ekit-site-logo {
		--container-widget-width: 130px;
		width: auto !important;
		max-width: 130px !important;
	}

	.thim-ekit__footer .thim-ekit-site-logo img,
	.thim-ekit__footer .elementor-widget-container img,
	.thim-ekit__footer img {
		width: auto !important;
		max-width: 130px !important;
		height: auto !important;
		margin-bottom: 14px;
	}

	.thim-ekit__footer .elementor-widget,
	#colophon .widget {
		margin-bottom: 18px;
	}

	.thim-ekit__footer .elementor-widget:last-child,
	#colophon .widget:last-child {
		margin-bottom: 0;
	}

	/* --- 11 & 12. One gutter, everywhere --------------------------------- */

	/*
	 * Every left edge on the page lined up differently, because the gutters
	 * nest and each page nests a different number of them. Measured on the
	 * cart: breadcrumb 24px (.container), page title 32px (wrap + inner),
	 * "Your Cart" 48px (+ column padding), the first row 57px
	 * (+ .cabina-cart-page). Four edges on one screen.
	 *
	 * The fix is to stop them stacking: every intermediate wrapper is flattened
	 * to zero and the gutter is applied once, at the level that actually holds
	 * the content. Everything then starts on the same line as the header.
	 *
	 * Two page builders are in play, so both container shapes are listed -
	 * Privacy Policy and Terms of Service use Elementor's newer atomic element,
	 * the rest classic boxed containers.
	 */
	/*
	 * Step 1: flatten every nested wrapper, so no gutter can stack.
	 *
	 * Note this no longer includes .e-con.e-parent - only its children. The
	 * previous version zeroed the parent and then handed the gutter back via
	 * `.e-con-boxed.e-parent > .e-con-inner`, which only exists on BOXED
	 * containers. Full-width parents (e-con-full) have no inner, so they were
	 * zeroed and never got anything back, and their text sat hard against the
	 * screen edge.
	 */
	body:not(.cabina-app-page) #main > .container-fluid,
	body:not(.cabina-app-page) #main > .container-fluid > .row,
	body:not(.cabina-app-page) #main > .container-fluid > .row > [class*="col-"],
	body:not(.cabina-app-page) #main > .container-fluid > .row > [class*="col-"] > article,
	body:not(.cabina-app-page) .cabina-page-title-wrap,
	body:not(.cabina-app-page) .entry-content .e-con-inner,
	body:not(.cabina-app-page) .entry-content .e-con.e-child,
	body:not(.cabina-app-page) .site-content > .elementor .e-con-inner,
	body:not(.cabina-app-page) .site-content > .elementor .e-con.e-child {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/*
	 * Step 2: one gutter, on whichever element is the outermost in its context.
	 * Every container shape is listed, boxed and full alike.
	 */
	/*
	 * Both page structures are covered.
	 *
	 * Most pages run through page.php and sit in .entry-content. The home page
	 * uses the elementor_header_footer template, which skips page.php entirely
	 * and renders .elementor straight into .site-content - so it has no
	 * .entry-content at all. Every earlier version of this rule keyed on
	 * .entry-content and therefore matched nothing on the home page, which is
	 * why its text stayed hard against the screen edge no matter what was
	 * adjusted.
	 */
	body:not(.cabina-app-page) .header_7 .container,
	body:not(.cabina-app-page) .breadcrumb-container .container,
	body:not(.cabina-app-page) .cabina-page-title-inner,
	body:not(.cabina-app-page) .entry-content > .elementor > .e-con.e-parent,
	body:not(.cabina-app-page) .entry-content > .elementor > .e-con.e-atomic-element,
	body:not(.cabina-app-page) .site-content > .elementor > .e-con.e-parent,
	body:not(.cabina-app-page) .site-content > .elementor > .e-con.e-atomic-element,
	body:not(.cabina-app-page) .cabina-cart-page {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/*
	 * My Account is WooCommerce markup, not Elementor, so none of the container
	 * selectors above reach it and its text sat hard against the screen edge.
	 *
	 * The gutter goes on the navigation and the content rather than a shared
	 * wrapper: the navigation panel has its own grey background and is meant to
	 * run edge to edge, so padding it from the outside would inset the panel
	 * instead of its text. Both take the same 20px, so the links and the body
	 * copy sit on one edge.
	 *
	 * Note `.woocommerce-account` is a class on <body>, so it has to be written
	 * without a descendant combinator - `body .woocommerce-account` matches
	 * nothing, which is why the first version of this rule did nothing at all.
	 */
	body.woocommerce-account .woocommerce-MyAccount-navigation,
	body.woocommerce-account .woocommerce-MyAccount-content {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/*
	 * The slider is the exception: it is meant to run edge to edge, and a gutter
	 * would inset it inside a white frame.
	 */
	.home .entry-content .elementor-element-bdb10b4 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* The cart draws its own full-width rules, so it takes the gutter itself
	   rather than inheriting one from the article wrapper. */
	body:not(.cabina-app-page) .woocommerce-cart #main > .container-fluid > .row > [class*="col-"] > article {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body:not(.cabina-app-page) .cabina-cart-page {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* --- Checkout and order received ------------------------------------- */

	/*
	 * The gutter rules above strip the padding from every container and hand it
	 * back per section - the cart and My Account each take their own 20px. The
	 * checkout was never given it back, so the billing form, the order table and
	 * the billing address all sat hard against both screen edges.
	 *
	 * `woocommerce-checkout` is on <body> for the checkout AND the order
	 * received page, so this one rule covers both.
	 */
	body.woocommerce-checkout .entry-content > .woocommerce {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/*
	 * The order review column carries its own 15px, which would sit on top of
	 * the 20px above and leave the two checkout columns on different edges.
	 * Both columns take the gutter from the wrapper instead.
	 */
	body.woocommerce-checkout .col2-set > .col-1,
	body.woocommerce-checkout .col2-set > .col-2 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*
	 * The order column also carries a ~5px left border, which is a divider
	 * between the two columns when they sit side by side. Stacked on a phone
	 * there is nothing to divide, and it pushed everything in that column 5px
	 * further in than the billing fields opposite it.
	 */
	body.woocommerce-checkout .col2-set > .col-2 {
		border-left: 0 !important;
		border-right: 0 !important;
	}

	/* --- Breadcrumb alignment -------------------------------------------- */

	/*
	 * The breadcrumb carries Bootstrap's list-inline margin-left: -5px, which
	 * normally cancels out against 5px of padding on each item. These items have
	 * no padding, so nothing cancelled it and "Home > Checkout" sat 5px left of
	 * the page title directly beneath it.
	 */
	.bread-crumb ul.breadcrumbs.list-inline {
		margin-left: 0 !important;
	}

	/* --- Top bar social icons -------------------------------------------- */

	/*
	 * The two icons were stacking one above the other.
	 *
	 * Both columns in the top row are col-xs-12, so on a phone each asks for the
	 * full width - but the row is display:flex with flex-wrap:nowrap, so instead
	 * of stacking they are squeezed onto one line and the social column shrank
	 * to 23px. That is narrower than the two icons together, so the list wrapped
	 * internally and the bar grew to two rows.
	 *
	 * The column takes only the width its icons need and stops shrinking; the
	 * contact details keep the rest.
	 */
	.header7-top-row .header7-social-col {
		flex: 0 0 auto !important;
		width: auto !important;
	}

	.header7-top-row ul.nav-social {
		flex-wrap: nowrap !important;
		gap: 16px;
	}

	.header7-top-row ul.nav-social > li {
		margin: 0 !important;
	}

	/*
	 * Email and phone come off the top bar on a phone.
	 *
	 * They took a whole line to themselves and pushed the language switcher onto
	 * a second one, making the bar two rows tall before the logo had even
	 * started. Both are still one tap away in the footer and on Contact Us.
	 *
	 * The two items have no class of their own, so they are matched by excluding
	 * the one that stays - anything in the list that is not the language
	 * switcher.
	 */
	.header7-top-row .header7-contact > li:not(.cabina-lang-switch) {
		display: none !important;
	}

	/*
	 * What is left is one short row: icons on the left, language on the right.
	 * The icons go back to being centred against it - the earlier top-alignment
	 * nudge existed only to line them up with the email, which has gone.
	 */
	.header7-top-row .header7-social-col {
		align-self: center !important;
		margin-top: 0 !important;
	}

	.header7-top-row .header7-contact {
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
		margin: 0 !important;
	}

	/*
	 * Bootstrap 3 clears its rows with `.row:before` and `.row:after`. In a flex
	 * container those pseudo-elements count as flex items, so this row was
	 * distributing space-between across four items rather than two - the icons
	 * and the language switcher were pushed inward, ~76px from each edge, with a
	 * matching gap in the middle. With the email and phone gone there was no
	 * content left to hide it.
	 */
	.header7-top-row::before,
	.header7-top-row::after {
		display: none !important;
	}

	/*
	 * With the pseudo-elements gone the two items sit on the row's own edges,
	 * which is 5px from the screen - 15px tighter than the logo directly below.
	 * The 15px puts the top bar on the same 20px gutter as the rest of the page.
	 */
	.header7-top-row .header7-social-col {
		padding-left: 15px !important;
	}

	.header7-top-row .header7-contact-col {
		padding-right: 15px !important;
	}

	/* --- Space under the logo -------------------------------------------- */

	/*
	 * The slider sits flush against the header - there is no gap between them.
	 * The white band above the first slide is the logo row's own padding: 15px
	 * above and below an 83px logo, inside a 114px bar. On a phone that reads as
	 * dead space between the logo and the slide.
	 *
	 * The bottom is trimmed harder than the top, so the logo keeps a little air
	 * beneath the dark contact bar without carrying the gap down onto the slide.
	 */
	.header_7 .header-center {
		padding-top: 10px !important;
		padding-bottom: 4px !important;
		min-height: 0 !important;
	}

	/* --- SHOP WARDROBE button -------------------------------------------- */

	/*
	 * The button carries 15px of left padding so it lines up with the wardrobe
	 * text on desktop, where the sibling text widgets carry the same 15px. On a
	 * phone those paddings are stripped by the gutter rules above, so that 15px
	 * had nothing to match and pushed the button in on its own - the heading and
	 * the paragraph sit at 20px, the button sat at 35px.
	 *
	 * Elementor puts widget padding on the inner container, not on the element,
	 * which is why zeroing .elementor-element-cabwrdb1 alone does nothing.
	 */
	.home .elementor-element-cabwrdb1 > .elementor-widget-container {
		padding-left: 0 !important;
	}

	/*
	 * And it sits closer to the copy it belongs to. 35px read as a detached
	 * block; the kitchen section above uses about 15px between its paragraph and
	 * its button, so this matches that.
	 */
	.home .elementor-element-cabwrdb1 {
		margin-top: -20px !important;
	}

	/* --- 3. Space above the slider --------------------------------------- */

	/*
	 * The slider block carries the page's top padding and the theme adds its
	 * own above it, which left a visible band between the header and the first
	 * slide.
	 */
	.home .entry-content .elementor-element-bdb10b4,
	.home .entry-content .elementor-element-bdb10b4 > .e-con-inner {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	.home #main > .container-fluid {
		padding-top: 0 !important;
	}

	/* --- 5, 7. Block spacing --------------------------------------------- */

	/*
	 * Every home block was padded 50px top and bottom on mobile as well as
	 * desktop, which on a phone reads as a gap rather than a separation.
	 */
	.home .entry-content > .elementor > .e-con.e-parent {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.home .elementor-element-6b96a55,
	.home .elementor-element-9f12278 {
		margin-top: 0;
		margin-bottom: 12px;
	}

	/* SLIM VS CLASSIC ran its text hard against the left rule. */
	.home .elementor-element-a93fdf4 .elementor-widget-container,
	.home .elementor-element-a93fdf4 .thim-ekits-heading {
		text-align: left;
	}

	.home .elementor-element-a93fdf4 > .e-con-inner > * {
		margin-bottom: 12px;
	}

	/* --- 6, 9. Text before media ----------------------------------------- */

	/*
	 * Reordering has to happen between siblings.
	 *
	 * `order` only applies to flex items of the same container, and the widgets
	 * on this page sit several containers deep. An earlier version set order on
	 * the widgets themselves - which are cousins, not siblings - so the only
	 * rule that took effect was the one on the CRAFTED FOR YOUR SPACE heading,
	 * a direct child. Giving it order:1 while its two real siblings kept the
	 * default 0 pushed the heading below both of them.
	 *
	 * These rules target the sibling containers instead:
	 *
	 *   59ee195 > 6b96a55  CRAFTED heading   - left where it is
	 *           > 678c92d  service cards
	 *           > 2efebbe  > c76f674 video
	 *                      > d15d084 DESIGN IT YOUR WAY
	 *
	 * so only the video and its heading swap, inside 2efebbe.
	 */
	.home .elementor-element-d15d084 { order: 1; }
	.home .elementor-element-c76f674 { order: 2; }

	/*
	 * KITCHEN LAYOUTS: the copy and its button come before the layout images.
	 *
	 *   6dbcffd > dbd9dda > 679ba06  four image boxes
	 *                     > 4233ae5  heading + Shop Kitchen
	 */
	.home .elementor-element-4233ae5 { order: 1; }
	.home .elementor-element-679ba06 { order: 2; }

	/*
	 * SLIM VS CLASSIC: heading and button before the before/after image.
	 *
	 *   a93fdf4 > 0ba0f16 > c9d47f6  heading + Shop Vanity
	 *                     > 6fa001a  before/after
	 */
	.home .elementor-element-c9d47f6 { order: 1; }
	.home .elementor-element-6fa001a { order: 2; }

	/*
	 * MADE IN QATAR: heading and copy above the video.
	 *
	 *   749d423 > bd411f1 > 16577a1  heading
	 *                     > 20c463b  video
	 */
	.home .elementor-element-16577a1 { order: 1; }
	.home .elementor-element-20c463b { order: 2; }

	/*
	 * Body copy lines up with the media beneath it.
	 *
	 * `width: 100%` was wrong here: these containers carry Elementor's own
	 * width custom property, and forcing both width and max-width made them
	 * wider than the column they sit in. The page then overflowed and the
	 * overflow-x guard clipped the left edge - which is why the S of SLIM, the
	 * K of KITCHEN and the M of MADE were cut off.
	 *
	 * Resetting the custom property and capping at 100% widens the copy without
	 * letting anything exceed its parent.
	 */
	.home .elementor-element-c9d47f6,
	.home .elementor-element-16577a1,
	.home .elementor-element-4233ae5,
	.home .elementor-element-d15d084 {
		--container-widget-width: 100%;
		width: auto !important;
		max-width: 100% !important;
	}

	/* --- 8, 10. One scrolling line --------------------------------------- */

	/*
	 * These grids stacked into tall columns on a phone. Turned into a single
	 * row that scrolls sideways, with snap points so a card always comes to
	 * rest aligned. The negative margins let the row bleed to the screen edges
	 * so it reads as scrollable rather than clipped.
	 */
	/*
	 * No negative margins. Bleeding these rows to the screen edge looked better
	 * but pushed them wider than the viewport wherever the parent had no
	 * matching padding, and the whole page then scrolled sideways - which
	 * clipped headings on the left. Staying inside the gutter is worth more
	 * than the bleed.
	 */
	/*
	 * Only these two. The VANITY / KITCHEN / WARDROBE photo cards
	 * (.custom-card-row) were made to scroll here as well, which the client
	 * never asked for - their reference for that block shows the cards stacked.
	 * They stack again below.
	 */
	.ca-four-box-wrap,
	.custom-room-icons {
		display: flex !important;
		grid-template-columns: none !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 0 0 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ca-four-box-wrap::-webkit-scrollbar,
	.custom-room-icons::-webkit-scrollbar {
		display: none;
	}

	.ca-four-box-wrap > *,
	.custom-room-icons > * {
		flex: 0 0 78%;
		max-width: 78%;
		scroll-snap-align: start;
	}

	/* Back to a stacked column, as the client's reference shows. */
	.custom-card-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* The room icons are small, so more than one fits at a time. */
	.custom-room-icons > * {
		flex: 0 0 46%;
		max-width: 46%;
	}

	/* --- 13. Cart ---------------------------------------------------------- */

	/*
	 * The stacked mobile cart is rebuilt as label / value rows, with the
	 * product image above them. Row striping is switched off - it came from the
	 * theme's shop_table_responsive rules and made each item look like a
	 * different kind of thing.
	 */
	.cabina-cart-table,
	.cabina-cart-table tbody,
	.cabina-cart-table tr,
	.cabina-cart-table td {
		display: block;
		width: 100%;
	}

	.cabina-cart-table thead {
		display: none;
	}

	.cabina-cart-table tr,
	.cabina-cart-table tr:nth-child(even),
	.cabina-cart-table tr:nth-child(odd),
	.cabina-cart-table td,
	.cabina-cart-table td:nth-child(even),
	.cabina-cart-table td:nth-child(odd) {
		background: transparent !important;
	}

	.cabina-cart-table tr {
		padding: 18px 0;
		border-bottom: 1px solid #111;
	}

	/*
	 * Label on the left, value beside it on the right, value text left
	 * aligned - the shape the client marked up on the sheet.
	 *
	 * A fixed label column is what keeps the values in one straight edge down
	 * the row. Letting the label size itself puts every value at a different
	 * left position, which is the misalignment that was reported.
	 *
	 * The selectors are deliberately long. WooCommerce's shop_table_responsive
	 * treatment right-aligns these cells from
	 * `.woocommerce table.shop_table_responsive tr td` - two classes and three
	 * elements, also !important. A shorter selector loses that tie however many
	 * !importants it carries, which is why the values sat against the right
	 * edge. Naming both of the table's own classes clears it.
	 */
	html body table.cabina-cart-table.shop_table_responsive td {
		display: grid !important;
		grid-template-columns: 124px minmax(0, 1fr);
		gap: 10px;
		align-items: start;
		padding: 5px 0 !important;
		border: 0 !important;
		text-align: left !important;
	}

	/* The label comes from the data-title the template already writes. */
	html body table.cabina-cart-table.shop_table_responsive td::before {
		content: attr(data-title) ":";
		display: block !important;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #666;
		font-size: 11px;
		font-weight: 700;
		text-align: left !important;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	/*
	 * The description keeps the same two columns, so its title and finish rows
	 * line up with the SN and Article No values above them - as marked on the
	 * sheet. Only the comments box breaks out to the full width; it is below
	 * the part the client aligned, and unusable squeezed into half a row.
	 */
	html body table.cabina-cart-table.shop_table_responsive td.cabina-cart-description .cabina-cart-note {
		grid-column: 1 / -1;
		margin-top: 10px;
	}

	/*
	 * The Actions cell holds only a Remove control and the quantity cell
	 * labels itself in the block above, so an empty "ACTIONS:" heading is
	 * noise.
	 */
	html body table.cabina-cart-table.shop_table_responsive td.cabina-cart-actions::before {
		display: none !important;
	}

	/*
	 * Everything above the notes reads as a left-aligned list, including the
	 * product image - the client asked for SN, Article No, Product Image and
	 * Item Description to line up on one edge. The image previously sat centred,
	 * which broke that column.
	 */
	html body table.cabina-cart-table.shop_table_responsive td.cabina-cart-image {
		margin-bottom: 4px;
		text-align: left !important;
	}

	html body table.cabina-cart-table.shop_table_responsive td.cabina-cart-image img {
		margin: 0 !important;
	}

	/*
	 * Article numbers stack under their label. On a wide screen each one is
	 * positioned against the middle of its product block in the neighbouring
	 * description cell; stacked, that cell is nowhere near, and the numbers
	 * landed on top of the description text. The script skips this width - this
	 * repeats it in CSS so the layout is right even if the script has not run.
	 */
	.cabina-cart-table .cabina-cart-article,
	.cabina-cart-table .cabina-cart-article-line {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		margin-top: 0 !important;
	}

	.cabina-cart-table .cabina-cart-article-line + .cabina-cart-article-line {
		margin-top: 4px !important;
	}

	/*
	 * Two controls centre themselves on a wide screen, where they sit under a
	 * narrow column heading: the article line is a centred flex box, and the
	 * Remove cross is a full-width centred block. Stacked, both floated into
	 * the middle of the row while everything around them was flush left.
	 */
	html body table.cabina-cart-table.shop_table_responsive .cabina-cart-article-line {
		display: block !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}

	html body table.cabina-cart-table.shop_table_responsive td.cabina-cart-actions a {
		display: inline-block !important;
		width: auto !important;
		margin-left: 0 !important;
		text-align: left !important;
	}

	.cabina-cart-table td.cabina-cart-quantity {
		align-items: center;
	}

	.cabina-cart-table td.cabina-cart-quantity .quantity {
		justify-content: flex-start;
	}

	.cabina-cart-note {
		display: block;
		margin-top: 0;
	}

	.cabina-cart-note label {
		display: none;
	}

	.cabina-cart-footer {
		display: block;
	}

	.cabina-cart-summary {
		margin-top: 22px;
	}

	/* --- R2/1. Gaps around the 3D view ----------------------------------- */

	/*
	 * The canvas sat inside a shell that kept desktop padding, leaving a band
	 * above and below the visualiser on a phone. The app already fills the
	 * space below the header; the padding was only ever decoration.
	 */
	.cabina-app-page .vmkc-shell,
	.cabina-app-page .vmwc-shell,
	.cabina-app-page .vm-vanity-shell,
	.cabina-app-page .vmkc-react-host,
	.cabina-app-page .vmwc-react-host,
	.cabina-app-page .vm-vanity-react-host {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.cabina-app-page #main > .container-fluid > .row > [class*="col-"] {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/*
	 * The real gap was one level further out. The app shortcode sits inside an
	 * Elementor container whose own generated CSS carries 50px of vertical
	 * padding, so the visualiser was inset 50px from the header and 50px from
	 * the footer while every element on the chain measured zero. Flatten the
	 * container itself - on app pages there is nothing else in it to space.
	 *
	 * Scoped to #main: the footer is Elementor-built as well, and a wider
	 * selector flattened its top padding too.
	 */
	.cabina-app-page #main .entry-content > .elementor > .elementor-element,
	.cabina-app-page #main .entry-content .elementor .e-con,
	.cabina-app-page #main .entry-content .elementor .e-con-inner {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		--padding-top: 0px;
		--padding-bottom: 0px;
	}

	/* --- R2/9. Gap above the footer -------------------------------------- */

	/*
	 * The white band above the room-icons block, between it and the footer.
	 *
	 * It is the 50px bottom padding on the last content section's inner
	 * container - the video ends, then 50px of nothing, then the grey block and
	 * the footer. Only the bottom is dropped; the top padding still separates
	 * the section from the one above it.
	 *
	 * Written against .site-content, not .entry-content: the home page uses the
	 * elementor_header_footer template and has no .entry-content, so the
	 * earlier version of this rule matched nothing at all.
	 */
	.home .site-content > .elementor > .e-con.e-parent:last-of-type,
	.home .site-content > .elementor > .e-con.e-parent:last-of-type > .e-con-inner,
	.home .site-content > .elementor > .elementor-element-749d423,
	.home .site-content > .elementor > .elementor-element-749d423 > .e-con-inner,
	.home .site-content > .elementor > .elementor-element-cc2ea83,
	.home .site-content > .elementor > .elementor-element-cc2ea83 > .e-con-inner {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}

	/*
	 * The rest of that gap is the footer's own.
	 *
	 * .thim-ekit__footer is a transparent wrapper carrying 28px of top padding
	 * and 22px of bottom padding, while the dark background sits on a container
	 * inside it - so the padding rendered as a white band above the footer and
	 * another below it, against the page background. The dark container keeps
	 * its own 60px of top padding, so nothing moves closer together; only the
	 * white is removed.
	 */
	.thim-ekit__footer {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* --- R2/10. Quotations list ------------------------------------------ */

	/*
	 * One separator per quotation, not a rule under every field. The stacked
	 * layout drew a line after each label/value pair, which read as a table of
	 * unrelated rows rather than one record per block.
	 */
	.cabina-quotations-table td {
		border-bottom: 0 !important;
		padding: 3px 0 !important;
	}

	.cabina-quotations-table tr {
		padding: 16px 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.cabina-quotations-table tr:last-child {
		border-bottom: 0;
	}

	/*
	 * WooCommerce's own account tables stack the same way and draw the same
	 * rule under every field, so they get the same treatment - one line between
	 * records, none inside one.
	 */
	body.woocommerce-account .woocommerce-orders-table td,
	body.woocommerce-account .woocommerce-table--order-downloads td,
	body.woocommerce-account .shop_table.order_details td {
		border-bottom: 0 !important;
		border-top: 0 !important;
	}

	body.woocommerce-account .woocommerce-orders-table tr,
	body.woocommerce-account .woocommerce-table--order-downloads tr {
		border-bottom: 1px solid #e5e5e5;
	}

	body.woocommerce-account .woocommerce-orders-table tr:last-child,
	body.woocommerce-account .woocommerce-table--order-downloads tr:last-child {
		border-bottom: 0;
	}

	/* --- 12. About Us block spacing -------------------------------------- */

	/*
	 * The gaps between blocks were set for a desktop column and left large
	 * empty bands on a phone.
	 */
	.page-id-5063 .entry-content .e-con.e-parent {
		padding-top: 22px !important;
		padding-bottom: 22px !important;
	}

	.page-id-5063 .entry-content .e-con.e-parent > .e-con-inner > .e-con {
		margin-bottom: 16px;
	}

	.page-id-5063 .elementor-widget-heading {
		margin-bottom: 8px;
	}
}