/* Rainbow Carpet - Website Design options (2026-11, v3)
   Chosen in kelola -> Website Design (Super Administrator only).
   Loaded only when an option other than "Original" is published or previewed.
   Every rule is scoped to body classes rcd-<group>-<option>; with all options on
   "Original" the <body> has no class and none of these rules apply.
   Desktop: nothing here changes sizes or positions of the existing layout.
   Phones & tablets: only the "Optimised layout" option rearranges the page, and
   only on screens narrower than 1000px. */

/* ---------- colour palettes (variables) ---------- */
body.rcd {
	--rcd-bg: #2B518F; --rcd-bg2: #1E417A; --rcd-panel: #D2DEEE; --rcd-head: #B9C0D0; --rcd-headline: #858C9E;
	--rcd-nav: #24447a; --rcd-nav2: #1a3463; --rcd-navink: #fff; --rcd-navhover: #B9C0D0;
	--rcd-ink: #001745; --rcd-card: #e2eef8; --rcd-btn: #b9c0d0; --rcd-btnink: #001745;
	--rcd-active: #001642; --rcd-activeink: #fff; --rcd-accent: #2B518F; --rcd-footer: #EBF0F6; --rcd-tab: #E1EEF7;
}
body.rcd-palette-royal {
	--rcd-bg: #13254a; --rcd-bg2: #0b1834; --rcd-panel: #f6f2e9; --rcd-head: #f3efe6; --rcd-headline: #c8a85a;
	--rcd-nav: #1a3060; --rcd-nav2: #0f1f42; --rcd-navink: #f3e7c8; --rcd-navhover: #d8b866;
	--rcd-ink: #13254a; --rcd-card: #fffdf8; --rcd-btn: #e9e1cf; --rcd-btnink: #13254a;
	--rcd-active: #13254a; --rcd-activeink: #f1d590; --rcd-accent: #b8963e; --rcd-footer: #efe8da; --rcd-tab: #f8f4ec;
}
body.rcd-palette-graphite {
	--rcd-bg: #2a2c30; --rcd-bg2: #1c1d20; --rcd-panel: #f2f0ec; --rcd-head: #ebe8e3; --rcd-headline: #b87333;
	--rcd-nav: #34373c; --rcd-nav2: #232528; --rcd-navink: #f0e6dc; --rcd-navhover: #d9955a;
	--rcd-ink: #2a2c30; --rcd-card: #fbfaf8; --rcd-btn: #e3ddd6; --rcd-btnink: #2a2c30;
	--rcd-active: #2a2c30; --rcd-activeink: #f3c9a3; --rcd-accent: #b87333; --rcd-footer: #e9e6e1; --rcd-tab: #f7f5f2;
}
body.rcd-palette-forest {
	--rcd-bg: #1f3a2c; --rcd-bg2: #13261c; --rcd-panel: #f3efe3; --rcd-head: #ece7d8; --rcd-headline: #8a6d3b;
	--rcd-nav: #26473a; --rcd-nav2: #183027; --rcd-navink: #efe6cf; --rcd-navhover: #cfb173;
	--rcd-ink: #1f3a2c; --rcd-card: #fbf9f2; --rcd-btn: #e4dcc6; --rcd-btnink: #1f3a2c;
	--rcd-active: #1f3a2c; --rcd-activeink: #ecd9a8; --rcd-accent: #8a6d3b; --rcd-footer: #ebe6d6; --rcd-tab: #f8f5ec;
}
body.rcd-palette-burgundy {
	--rcd-bg: #4a1622; --rcd-bg2: #320d16; --rcd-panel: #f8f2e8; --rcd-head: #f2eadc; --rcd-headline: #9c2a3a;
	--rcd-nav: #5a1c2a; --rcd-nav2: #3c111c; --rcd-navink: #f6e4d6; --rcd-navhover: #e2ab78;
	--rcd-ink: #4a1622; --rcd-card: #fffbf5; --rcd-btn: #eddccc; --rcd-btnink: #4a1622;
	--rcd-active: #4a1622; --rcd-activeink: #f3d3b4; --rcd-accent: #9c2a3a; --rcd-footer: #f1e9db; --rcd-tab: #fbf6ef;
}
body.rcd-palette-ocean {
	--rcd-bg: #12394a; --rcd-bg2: #0b2633; --rcd-panel: #eef4f5; --rcd-head: #e7f0f2; --rcd-headline: #2a7f86;
	--rcd-nav: #17485c; --rcd-nav2: #0e3141; --rcd-navink: #e2f1f2; --rcd-navhover: #8fd0d4;
	--rcd-ink: #12394a; --rcd-card: #fbfdfd; --rcd-btn: #d9e8ea; --rcd-btnink: #12394a;
	--rcd-active: #1f6f78; --rcd-activeink: #fff; --rcd-accent: #2a7f86; --rcd-footer: #e3eef0; --rcd-tab: #f5f9fa;
}
body.rcd-palette-noir {
	--rcd-bg: #121212; --rcd-bg2: #070707; --rcd-panel: #f7f4ec; --rcd-head: #f4f0e6; --rcd-headline: #c9a24a;
	--rcd-nav: #1c1c1c; --rcd-nav2: #0d0d0d; --rcd-navink: #f3e3b5; --rcd-navhover: #d9b45a;
	--rcd-ink: #161616; --rcd-card: #fffdf7; --rcd-btn: #ece4d0; --rcd-btnink: #161616;
	--rcd-active: #161616; --rcd-activeink: #e8c66e; --rcd-accent: #b8913a; --rcd-footer: #efe9dc; --rcd-tab: #faf7f0;
}
body.rcd-palette-teal {
	--rcd-bg: #0f4c4c; --rcd-bg2: #093434; --rcd-panel: #f4efe4; --rcd-head: #efe8d8; --rcd-headline: #c49a5a;
	--rcd-nav: #146060; --rcd-nav2: #0c4242; --rcd-navink: #f3ead6; --rcd-navhover: #e2bf86;
	--rcd-ink: #0f3d3d; --rcd-card: #fffcf5; --rcd-btn: #e6dcc5; --rcd-btnink: #0f3d3d;
	--rcd-active: #0f5a5a; --rcd-activeink: #fff; --rcd-accent: #1e8080; --rcd-footer: #ece5d4; --rcd-tab: #f8f4ea;
}
body.rcd-palette-plum {
	--rcd-bg: #3b1f3f; --rcd-bg2: #26122a; --rcd-panel: #f2f0f4; --rcd-head: #ebe8ee; --rcd-headline: #8f8a99;
	--rcd-nav: #4a2850; --rcd-nav2: #311a36; --rcd-navink: #ece6f0; --rcd-navhover: #c9b8d6;
	--rcd-ink: #2f1833; --rcd-card: #fcfbfd; --rcd-btn: #e2dde8; --rcd-btnink: #2f1833;
	--rcd-active: #4a2850; --rcd-activeink: #fff; --rcd-accent: #7a4a84; --rcd-footer: #e9e5ee; --rcd-tab: #f7f5f9;
}
body.rcd-palette-olive {
	--rcd-bg: #3d4227; --rcd-bg2: #282c18; --rcd-panel: #f5f1e6; --rcd-head: #efeadb; --rcd-headline: #9a8a5a;
	--rcd-nav: #4b5131; --rcd-nav2: #343821; --rcd-navink: #f1ead2; --rcd-navhover: #d6c48c;
	--rcd-ink: #2e3220; --rcd-card: #fdfbf4; --rcd-btn: #e6dfca; --rcd-btnink: #2e3220;
	--rcd-active: #4b5131; --rcd-activeink: #f6eccb; --rcd-accent: #7d8450; --rcd-footer: #ede7d6; --rcd-tab: #f9f6ee;
}
body.rcd-palette-rose {
	--rcd-bg: #1a1f2e; --rcd-bg2: #10131d; --rcd-panel: #f8f1ee; --rcd-head: #f4ebe7; --rcd-headline: #c08a7d;
	--rcd-nav: #242a3d; --rcd-nav2: #161a27; --rcd-navink: #f3dcd4; --rcd-navhover: #e0a99a;
	--rcd-ink: #1a1f2e; --rcd-card: #fffaf8; --rcd-btn: #efdcd5; --rcd-btnink: #1a1f2e;
	--rcd-active: #1a1f2e; --rcd-activeink: #f0c2b4; --rcd-accent: #b76e79; --rcd-footer: #f1e7e3; --rcd-tab: #fbf6f4;
}
body.rcd-palette-mono {
	--rcd-bg: #1b1b1b; --rcd-bg2: #0e0e0e; --rcd-panel: #ffffff; --rcd-head: #ffffff; --rcd-headline: #1b1b1b;
	--rcd-nav: #222222; --rcd-nav2: #111111; --rcd-navink: #ffffff; --rcd-navhover: #bdbdbd;
	--rcd-ink: #111111; --rcd-card: #fafafa; --rcd-btn: #e6e6e6; --rcd-btnink: #111111;
	--rcd-active: #111111; --rcd-activeink: #fff; --rcd-accent: #444444; --rcd-footer: #f2f2f2; --rcd-tab: #f7f7f7;
}
body.rcd-palette-terracotta {
	--rcd-bg: #6b3426; --rcd-bg2: #4a2219; --rcd-panel: #f8efe6; --rcd-head: #f3e7da; --rcd-headline: #c0764f;
	--rcd-nav: #7d3e2d; --rcd-nav2: #5a2b1f; --rcd-navink: #fbe9da; --rcd-navhover: #f0b48a;
	--rcd-ink: #4a2219; --rcd-card: #fffaf4; --rcd-btn: #efdac8; --rcd-btnink: #4a2219;
	--rcd-active: #7d3e2d; --rcd-activeink: #fff; --rcd-accent: #c0643e; --rcd-footer: #f2e5d8; --rcd-tab: #fbf5ee;
}
body.rcd-palette-slate {
	--rcd-bg: #3a4655; --rcd-bg2: #283240; --rcd-panel: #eef3f8; --rcd-head: #e8eef5; --rcd-headline: #7aa7d6;
	--rcd-nav: #445265; --rcd-nav2: #303b4a; --rcd-navink: #eaf2fb; --rcd-navhover: #a9cdf0;
	--rcd-ink: #26313f; --rcd-card: #fbfdff; --rcd-btn: #d9e4f0; --rcd-btnink: #26313f;
	--rcd-active: #2f5f8f; --rcd-activeink: #fff; --rcd-accent: #4a87c5; --rcd-footer: #e5ecf3; --rcd-tab: #f5f8fc;
}
body.rcd-palette-emerald {
	--rcd-bg: #0d4a36; --rcd-bg2: #073324; --rcd-panel: #fbf8ee; --rcd-head: #f6f1e2; --rcd-headline: #c9a24a;
	--rcd-nav: #12583f; --rcd-nav2: #0a3c2b; --rcd-navink: #f6efd8; --rcd-navhover: #dcc27a;
	--rcd-ink: #0b3a2a; --rcd-card: #fffdf6; --rcd-btn: #ece5cf; --rcd-btnink: #0b3a2a;
	--rcd-active: #0d4a36; --rcd-activeink: #f1dc9c; --rcd-accent: #178a5f; --rcd-footer: #f1ecdc; --rcd-tab: #fcfaf2;
}
body.rcd-palette-mocha {
	--rcd-bg: #3e2a20; --rcd-bg2: #2a1b14; --rcd-panel: #f6eee4; --rcd-head: #f1e6d8; --rcd-headline: #c68a4a;
	--rcd-nav: #4d3428; --rcd-nav2: #34231a; --rcd-navink: #f7e6d2; --rcd-navhover: #e8b278;
	--rcd-ink: #3a271d; --rcd-card: #fffaf3; --rcd-btn: #ead9c4; --rcd-btnink: #3a271d;
	--rcd-active: #4d3428; --rcd-activeink: #f5c98f; --rcd-accent: #b5733a; --rcd-footer: #efe4d6; --rcd-tab: #faf4ec;
}
body.rcd-palette-sapphire {
	--rcd-bg: #0f2a6b; --rcd-bg2: #091b48; --rcd-panel: #f1f3f7; --rcd-head: #eceff5; --rcd-headline: #9aa3b5;
	--rcd-nav: #163584; --rcd-nav2: #0d245c; --rcd-navink: #eef2fb; --rcd-navhover: #b8c6e6;
	--rcd-ink: #0f2350; --rcd-card: #fcfdff; --rcd-btn: #dde3ee; --rcd-btnink: #0f2350;
	--rcd-active: #163584; --rcd-activeink: #fff; --rcd-accent: #2c55c0; --rcd-footer: #e8ecf3; --rcd-tab: #f6f8fb;
}

/* "Paper & blue (web app)": the Cloud MIS web app's warm paper neutrals and its one deep-blue accent */
body.rcd-palette-webapp {
	--rcd-bg: #FAFAF9; --rcd-bg2: #F5F4F1; --rcd-panel: #FFFFFF; --rcd-head: #FFFFFF; --rcd-headline: #2A6CB4;
	--rcd-nav: #2A6CB4; --rcd-nav2: #1F5595; --rcd-navink: #FFFFFF; --rcd-navhover: #D9E8F6;
	--rcd-ink: #3F3B37; --rcd-card: #FFFFFF; --rcd-btn: #F5F4F1; --rcd-btnink: #3F3B37;
	--rcd-active: #2A6CB4; --rcd-activeink: #FFFFFF; --rcd-accent: #2A6CB4; --rcd-footer: #F5F4F1; --rcd-tab: #FAFAF9;
}

/* applied only when a palette other than Original is chosen */
body.rcd-themed { background-color: var(--rcd-bg); }
.rcd-themed #header { background-color: var(--rcd-head); border-bottom-color: var(--rcd-headline); }
.rcd-themed .searhproduct span, .rcd-themed .top-login, .rcd-themed .logo h1 { color: var(--rcd-ink); }
.rcd-themed .nav { background: linear-gradient(var(--rcd-nav), var(--rcd-nav2)); }
.rcd-themed .nav ul li { background: linear-gradient(to right, rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 1px, transparent 1px) no-repeat; }
.rcd-themed .nav ul li:first-child { background: none; }
.rcd-themed .nav ul li a { color: var(--rcd-navink); }
.rcd-themed .nav ul li a:hover { color: var(--rcd-navhover); }
.rcd-themed .nav ul li ul li, .rcd-themed .nav ul li ul li:first-child { background: var(--rcd-nav2); }
.rcd-themed .nav ul li ul li a:hover { background: var(--rcd-navhover); color: var(--rcd-nav2); }
.rcd-themed .maincontent, .rcd-themed .content-detail { background-color: var(--rcd-panel); }
.rcd-themed h1, .rcd-themed h2, .rcd-themed h3, .rcd-themed p, .rcd-themed .row-produk h3,
.rcd-themed .room h3, .rcd-themed .productbottom h3, .rcd-themed .cat-abstract a,
.rcd-themed .detail-tab-produk table tr td, .rcd-themed .urutan label { color: var(--rcd-ink); }
.rcd-themed .header-product, .rcd-themed .blocktitle { border-bottom-color: var(--rcd-accent); }
.rcd-themed .row-produk { background-color: var(--rcd-card); }
.rcd-themed .subcategory a, .rcd-themed .rc-backing-btn { background-color: var(--rcd-btn); color: var(--rcd-btnink); }
.rcd-themed .subcategory .active a, .rcd-themed .rc-backing-btn.active,
.rcd-themed .cat-abstract .rc-structure li.active a { background-color: var(--rcd-active); color: var(--rcd-activeink); }
.rcd-themed .rc-backing-btn:hover { background-color: var(--rcd-accent); color: #fff; }
.rcd-themed .viewall { background-color: var(--rcd-active); color: var(--rcd-activeink); }
.rcd-themed .viewall:hover { background-color: var(--rcd-accent); }
.rcd-themed .nav-produk { background: linear-gradient(var(--rcd-nav), var(--rcd-nav2)); }
.rcd-themed .nav-produk > li:hover, .rcd-themed .nav-produk > li#current { background: var(--rcd-accent); }
/* the template's tab arrow picture has a navy stripe built in: draw the arrow in the panel colour instead */
.rcd-themed .nav-produk > li a:hover, .rcd-themed .nav-produk > li a#current { background: none; position: relative; }
.rcd-themed .nav-produk > li a:hover:after, .rcd-themed .nav-produk > li a#current:after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--rcd-tab); }
.rcd-themed .detail-tab-produk { background-color: var(--rcd-tab); }
.rcd-themed .colour-list > li:hover, .rcd-themed .colour-list > li.colourselected,
.rcd-themed .kecil-bawah > img:hover, .rcd-themed .kecil-bawah > img.roomselected,
.rcd-themed .kecil-bawah a img:hover, .rcd-themed .productbottom .pbottomselected { border-color: var(--rcd-accent); }
.rcd-themed .footer-inner { background-color: var(--rcd-footer); }
.rcd-themed .terms a, .rcd-themed .copyright p, .rcd-themed .copyright a { color: var(--rcd-ink); }
.rcd-themed .rc-noresult, .rcd-themed .rc-noresult a { color: var(--rcd-ink); }

/* ---------- page background: colour + texture layers ----------
   The texture (--rcd-tex-img) and the background gradient (--rcd-bg-img) are separate
   layers, so any texture can sit on any background. With neither chosen this is
   "none, none", the same as the original. */
body.rcd { background-image: var(--rcd-tex-img, none), var(--rcd-bg-img, var(--rcd-bg-base, none)); }
.rcd-tex { background-image: var(--rcd-tex-img, none), var(--rcd-bg-base, none); }	/* kelola samples */
.rcd-bgs { background-image: var(--rcd-bg-img, none); }	/* kelola samples */

/* page background colour (overrides the colour scheme's page colour) */
body.rcd-background-white, .rcd-bgs-white         { background-color: #eef0f3; --rcd-bg-img: none; }
body.rcd-background-cream, .rcd-bgs-cream         { background-color: #efe7d8; --rcd-bg-img: none; }
body.rcd-background-silver, .rcd-bgs-silver       { background-color: #c9ced6; --rcd-bg-img: none; }
body.rcd-background-charcoal, .rcd-bgs-charcoal   { background-color: #26282c; --rcd-bg-img: none; }
body.rcd-background-midnight, .rcd-bgs-midnight   { background-color: #0c1424; --rcd-bg-img: none; }
body.rcd-background-paper, .rcd-bgs-paper         { background-color: #FAFAF9; --rcd-bg-img: none; }
body.rcd-background-navygrad, .rcd-bgs-navygrad   { background-color: #142a55; --rcd-bg-img: linear-gradient(160deg, #1d3a73 0%, #0b1733 100%); }
body.rcd-background-twilight, .rcd-bgs-twilight   { background-color: #2d2a5a; --rcd-bg-img: linear-gradient(160deg, #2d2a6b 0%, #4a2c6d 50%, #1b1838 100%); }
body.rcd-background-seaglass, .rcd-bgs-seaglass   { background-color: #164650; --rcd-bg-img: linear-gradient(160deg, #2f6f73 0%, #164650 55%, #0d2e38 100%); }
body.rcd-background-champagne, .rcd-bgs-champagne { background-color: #e6d5b8; --rcd-bg-img: linear-gradient(160deg, #f6eedf 0%, #e6d5b8 55%, #cdb68e 100%); }
body.rcd-background-rosedusk, .rcd-bgs-rosedusk   { background-color: #3a1f30; --rcd-bg-img: linear-gradient(160deg, #5a3044 0%, #3a1f30 55%, #1f1220 100%); }
body.rcd-background-pine, .rcd-bgs-pine           { background-color: #183a2b; --rcd-bg-img: linear-gradient(160deg, #2c5a43 0%, #183a2b 55%, #0d2219 100%); }

/* ---------- background textures (also used for the kelola samples) ---------- */
body.rcd-texture-linen, .rcd-tex-linen {
	--rcd-tex-img:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px),
		repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 3px);
}
body.rcd-texture-weave, .rcd-tex-weave {
	--rcd-tex-img:
		repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 6px),
		repeating-linear-gradient(-45deg, rgba(0,0,0,0.08) 0, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 6px);
}
body.rcd-texture-grain, .rcd-tex-grain {
	--rcd-tex-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.16'/></svg>");
}
body.rcd-texture-pinstripe, .rcd-tex-pinstripe {
	--rcd-tex-img: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 14px);
}
body.rcd-texture-spotlight, .rcd-tex-spotlight {
	--rcd-tex-img: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);
	--rcd-bg-base: linear-gradient(var(--rcd-bg, #2B518F), var(--rcd-bg2, #1E417A));
}
body.rcd-texture-herringbone, .rcd-tex-herringbone {
	--rcd-tex-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10'><path d='M0 10 L10 0 M10 5 L20 15 M10 -5 L20 5' fill='none' stroke='white' stroke-opacity='0.07' stroke-width='2'/></svg>");
}
body.rcd-texture-honeycomb, .rcd-tex-honeycomb {
	--rcd-tex-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='45'><path d='M0 0 V7.5 L13 15 L26 7.5 V0 M13 15 V30 L0 37.5 V45 M13 30 L26 37.5 V45' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1.2'/></svg>");
}
body.rcd-texture-diamond, .rcd-tex-diamond {
	--rcd-tex-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 0 L24 12 L12 24 L0 12 Z' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1'/></svg>");
}
body.rcd-texture-dots, .rcd-tex-dots {
	--rcd-tex-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><circle cx='7' cy='7' r='1.2' fill='white' fill-opacity='0.14'/></svg>");
}
body.rcd-texture-waves, .rcd-tex-waves {
	--rcd-tex-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='16'><path d='M0 8 Q15 0 30 8 T60 8' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1.5'/></svg>");
}
body.rcd-texture-tweed, .rcd-tex-tweed {
	--rcd-tex-img:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.06' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23t)' opacity='0.16'/></svg>"),
		repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 5px);
}
body.rcd-texture-silk, .rcd-tex-silk {
	--rcd-tex-img: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.09) 28%, rgba(255,255,255,0) 44%, rgba(255,255,255,0.06) 64%, rgba(255,255,255,0) 82%);
}
body.rcd-texture-vignette, .rcd-tex-vignette {
	--rcd-tex-img: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.38) 100%);
}
/* from the Cloud MIS web app: thin warp threads every 6px with a soft white light from the top */
body.rcd-texture-woven, .rcd-tex-woven {
	--rcd-tex-img:
		linear-gradient(to bottom, rgba(255,255,255,0.9) 0px, rgba(255,255,255,0) 220px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%233F3B37' stroke-opacity='0.045'%3E%3Cpath d='M3 0v24M9 0v24M15 0v24M21 0v24' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}
/* from the Cloud MIS web app: soft 40px diagonal facets */
body.rcd-texture-diagonal, .rcd-tex-diagonal {
	--rcd-tex-img: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.6' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
body.rcd-texture-spotlight, body.rcd-texture-vignette { background-attachment: fixed; }

/* ---------- background animation (behind the page) ----------
   Painted on the page background only, behind every panel, so it never covers text
   or photos and cannot be clicked. Only for devices that allow motion. */
body.rcd-ambient-snow::before, .rcd-ambdemo.rcd-ambient-snow::before {
	background-image:
		radial-gradient(circle at 25px 35px, rgba(255,255,255,0.9) 1.5px, rgba(255,255,255,0) 2.5px),
		radial-gradient(circle at 115px 95px, rgba(255,255,255,0.75) 1.2px, rgba(255,255,255,0) 2.2px),
		radial-gradient(circle at 170px 160px, rgba(255,255,255,0.8) 1.4px, rgba(255,255,255,0) 2.4px),
		radial-gradient(circle at 70px 175px, rgba(255,255,255,0.6) 1px, rgba(255,255,255,0) 2px);
	background-size: 200px 200px;
}
body.rcd-ambient-snow::after, .rcd-ambdemo.rcd-ambient-snow::after {
	background-image:
		radial-gradient(circle at 60px 80px, rgba(255,255,255,0.85) 2.5px, rgba(255,255,255,0) 4px),
		radial-gradient(circle at 210px 230px, rgba(255,255,255,0.7) 3px, rgba(255,255,255,0) 4.5px),
		radial-gradient(circle at 250px 40px, rgba(255,255,255,0.6) 2px, rgba(255,255,255,0) 3.5px);
	background-size: 300px 300px;
}
body.rcd-ambient-sparkle::before, .rcd-ambdemo.rcd-ambient-sparkle::before {
	background-image:
		radial-gradient(circle at 30px 50px, rgba(255,255,255,0.95) 1px, rgba(255,255,255,0.3) 2px, rgba(255,255,255,0) 4px),
		radial-gradient(circle at 150px 30px, rgba(255,255,255,0.9) 1px, rgba(255,255,255,0.25) 2px, rgba(255,255,255,0) 4px),
		radial-gradient(circle at 100px 160px, rgba(255,255,255,0.9) 1px, rgba(255,255,255,0.25) 2px, rgba(255,255,255,0) 4px),
		radial-gradient(circle at 200px 120px, rgba(255,255,255,0.8) 1px, rgba(255,255,255,0.2) 2px, rgba(255,255,255,0) 3.5px);
	background-size: 220px 220px;
}
body.rcd-ambient-sparkle::after, .rcd-ambdemo.rcd-ambient-sparkle::after {
	background-image:
		radial-gradient(circle at 80px 90px, rgba(255,236,170,0.95) 1px, rgba(255,236,170,0.3) 2.5px, rgba(255,236,170,0) 5px),
		radial-gradient(circle at 260px 210px, rgba(255,236,170,0.9) 1px, rgba(255,236,170,0.25) 2.5px, rgba(255,236,170,0) 5px),
		radial-gradient(circle at 190px 300px, rgba(255,236,170,0.85) 1px, rgba(255,236,170,0.2) 2px, rgba(255,236,170,0) 4px);
	background-size: 330px 330px;
}
body.rcd-ambient-glow::before, .rcd-ambdemo.rcd-ambient-glow::before {
	background-image:
		radial-gradient(45vw 40vh at 28% 32%, rgba(120,170,255,0.32), rgba(120,170,255,0)),
		radial-gradient(40vw 38vh at 72% 62%, rgba(255,190,120,0.22), rgba(255,190,120,0)),
		radial-gradient(38vw 34vh at 50% 88%, rgba(220,130,255,0.18), rgba(220,130,255,0));
}
body.rcd-ambient-bokeh::before, .rcd-ambdemo.rcd-ambient-bokeh::before {
	background-image:
		radial-gradient(circle at 40px 60px, rgba(255,255,255,0.16) 6px, rgba(255,255,255,0) 11px),
		radial-gradient(circle at 180px 140px, rgba(255,255,255,0.12) 9px, rgba(255,255,255,0) 15px),
		radial-gradient(circle at 110px 230px, rgba(255,255,255,0.14) 5px, rgba(255,255,255,0) 10px);
	background-size: 260px 260px;
}
body.rcd-ambient-bokeh::after, .rcd-ambdemo.rcd-ambient-bokeh::after {
	background-image:
		radial-gradient(circle at 90px 40px, rgba(255,220,170,0.14) 8px, rgba(255,220,170,0) 14px),
		radial-gradient(circle at 230px 200px, rgba(255,220,170,0.12) 6px, rgba(255,220,170,0) 12px);
	background-size: 300px 300px;
}
.rcd-ambdemo::before, .rcd-ambdemo::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
/* kelola samples are small, so their patterns are packed closer (tile sizes still divide the travel distance) */
.rcd-ambdemo.rcd-ambient-snow::before { background-size: 60px 60px; }
.rcd-ambdemo.rcd-ambient-snow::after { background-size: 100px 100px; }
.rcd-ambdemo.rcd-ambient-sparkle::before { background-size: 70px 70px; }
.rcd-ambdemo.rcd-ambient-sparkle::after { background-size: 100px 100px; }
.rcd-ambdemo.rcd-ambient-bokeh::before { background-size: 104px 104px; }
.rcd-ambdemo.rcd-ambient-bokeh::after { background-size: 120px 120px; }
.rcd-ambdemo.rcd-ambient-glow::before {
	left: -20%; right: -20%; top: -20%; bottom: -20%;
	background-image:
		radial-gradient(40% 70% at 30% 40%, rgba(120,170,255,0.45), rgba(120,170,255,0)),
		radial-gradient(35% 60% at 70% 60%, rgba(255,190,120,0.35), rgba(255,190,120,0));
}
@keyframes rcdDriftSmall { from { transform: translate3d(-8%, -6%, 0); } to { transform: translate3d(8%, 6%, 0); } }
@keyframes rcdFall  { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(14px, 300px, 0); } 100% { transform: translate3d(0, 600px, 0); } }
@keyframes rcdRiseUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -520px, 0); } }
@keyframes rcdRiseUp2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -600px, 0); } }
@keyframes rcdTwinkle { from { opacity: 0.15; } to { opacity: 1; } }
@keyframes rcdDrift { from { transform: translate3d(-6vw, -4vh, 0) scale(1); } to { transform: translate3d(6vw, 4vh, 0) scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
	body.rcd-ambient-snow::before, body.rcd-ambient-snow::after,
	body.rcd-ambient-sparkle::before, body.rcd-ambient-sparkle::after,
	body.rcd-ambient-glow::before, body.rcd-ambient-bokeh::before, body.rcd-ambient-bokeh::after {
		content: ''; position: fixed; left: -30px; right: -30px; top: 0; bottom: 0; z-index: -1; pointer-events: none; will-change: transform;
	}
	body.rcd-ambient-snow::before { top: -600px; animation: rcdFall 48s linear infinite; }
	body.rcd-ambient-snow::after  { top: -600px; animation: rcdFall 30s linear infinite; }
	body.rcd-ambient-sparkle::before { animation: rcdTwinkle 3.2s ease-in-out infinite alternate; will-change: opacity; }
	body.rcd-ambient-sparkle::after  { animation: rcdTwinkle 4.6s ease-in-out -2.3s infinite alternate; will-change: opacity; }
	body.rcd-ambient-glow::before { left: -25vw; right: auto; top: -25vh; bottom: auto; width: 150vw; height: 150vh; animation: rcdDrift 26s ease-in-out infinite alternate; }
	body.rcd-ambient-bokeh::before { bottom: -520px; animation: rcdRiseUp 52s linear infinite; }
	body.rcd-ambient-bokeh::after  { bottom: -600px; animation: rcdRiseUp2 38s linear infinite; }
	.rcd-ambdemo.rcd-ambient-snow::before, .rcd-ambdemo.rcd-ambient-snow::after { top: -600px; animation: rcdFall 30s linear infinite; }
	.rcd-ambdemo.rcd-ambient-sparkle::before { animation: rcdTwinkle 3.2s ease-in-out infinite alternate; }
	.rcd-ambdemo.rcd-ambient-sparkle::after  { animation: rcdTwinkle 4.6s ease-in-out -2.3s infinite alternate; }
	.rcd-ambdemo.rcd-ambient-glow::before { animation: rcdDriftSmall 6s ease-in-out infinite alternate; }
	.rcd-ambdemo.rcd-ambient-bokeh::before { bottom: -520px; animation: rcdRiseUp 30s linear infinite; }
	.rcd-ambdemo.rcd-ambient-bokeh::after  { bottom: -600px; animation: rcdRiseUp2 22s linear infinite; }
}

/* ---------- panel finish (content panels and footer) ---------- */
.rcd-panel-matte .maincontent, .rcd-panel-matte .content-detail, .rcd-panel-matte .footer-inner {
	outline: 1px solid rgba(0, 0, 0, 0.06);
	outline-offset: -1px;
}
.rcd-panel-paper .maincontent, .rcd-panel-paper .content-detail {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23p)' opacity='0.07'/></svg>");
}
.rcd-panel-sheen .maincontent, .rcd-panel-sheen .content-detail {
	background-image: linear-gradient(180deg, rgba(255,255,255,0.65) 0, rgba(255,255,255,0) 260px);
}
.rcd-panel-glass .maincontent, .rcd-panel-glass .content-detail {
	background-color: rgba(255, 255, 255, 0.78);
	outline: 1px solid rgba(255, 255, 255, 0.55);
	outline-offset: -1px;
	-webkit-backdrop-filter: blur(6px) saturate(1.15);
	backdrop-filter: blur(6px) saturate(1.15);
}
.rcd-panel-pearl .maincontent, .rcd-panel-pearl .content-detail {
	background-image: linear-gradient(125deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%, rgba(255,235,248,0.35) 50%, rgba(225,242,255,0.4) 70%, rgba(255,255,255,0) 100%);
}
.rcd-panel-canvas .maincontent, .rcd-panel-canvas .content-detail {
	background-image:
		repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0, rgba(0,0,0,0.03) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
		repeating-linear-gradient(90deg, rgba(0,0,0,0.025) 0, rgba(0,0,0,0.025) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
}
.rcd-panel-gradient .maincontent, .rcd-panel-gradient .content-detail {
	background-image: linear-gradient(180deg, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.05) 100%);
}
.rcd-panel-edge .maincontent, .rcd-panel-edge .content-detail, .rcd-panel-edge .footer-inner {
	outline: 2px solid var(--rcd-accent, #2B518F);
	outline-offset: -2px;
}

/* ---------- shadows & depth ---------- */
.rcd-depth-flat #header, .rcd-depth-flat .maincontent, .rcd-depth-flat .content-detail,
.rcd-depth-flat .footer-inner, .rcd-depth-flat .row-produk { box-shadow: none; }
.rcd-depth-soft #header { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); }
.rcd-depth-soft .maincontent, .rcd-depth-soft .content-detail, .rcd-depth-soft .footer-inner { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.rcd-depth-soft .row-produk { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.rcd-depth-deep #header { box-shadow: 0 2px 0 rgba(255,255,255,0.4) inset, 0 8px 24px rgba(0, 0, 0, 0.45); }
.rcd-depth-deep .maincontent, .rcd-depth-deep .content-detail, .rcd-depth-deep .footer-inner {
	box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.25);
}
.rcd-depth-deep .row-produk { box-shadow: 0 1px 0 #fff inset, 0 8px 18px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.18); }
.rcd-depth-deep .subcategory a, .rcd-depth-deep .rc-backing-btn, .rcd-depth-deep .viewall {
	box-shadow: 0 2px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
}
.rcd-depth-floating #header { box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.6); }
.rcd-depth-floating .maincontent, .rcd-depth-floating .content-detail, .rcd-depth-floating .footer-inner {
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.rcd-depth-floating .row-produk { box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.45); }
.rcd-depth-layered #header { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11); }
.rcd-depth-layered .maincontent, .rcd-depth-layered .content-detail, .rcd-depth-layered .footer-inner {
	box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11);
}
.rcd-depth-layered .row-produk { box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 8px 8px rgba(0,0,0,0.08); }
.rcd-depth-bevel #header { box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 6px 16px rgba(0,0,0,0.35); }
.rcd-depth-bevel .maincontent, .rcd-depth-bevel .content-detail, .rcd-depth-bevel .footer-inner {
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.75), inset 0 -3px 0 rgba(0,0,0,0.08), inset 2px 0 0 rgba(255,255,255,0.35), inset -2px 0 0 rgba(0,0,0,0.05), 0 8px 22px rgba(0,0,0,0.3);
}
.rcd-depth-bevel .row-produk { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,0.1), 0 3px 8px rgba(0,0,0,0.2); }
.rcd-depth-bevel .subcategory a, .rcd-depth-bevel .rc-backing-btn, .rcd-depth-bevel .viewall {
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(0,0,0,0.2);
}
.rcd-depth-sharp #header { box-shadow: 0 5px 0 rgba(0,0,0,0.25); }
.rcd-depth-sharp .maincontent, .rcd-depth-sharp .content-detail, .rcd-depth-sharp .footer-inner { box-shadow: 8px 8px 0 rgba(0,0,0,0.3); }
.rcd-depth-sharp .row-produk { box-shadow: 5px 5px 0 rgba(0,0,0,0.18); }
.rcd-depth-halo #header { box-shadow: 0 0 30px 4px rgba(255,255,255,0.22); }
.rcd-depth-halo .maincontent, .rcd-depth-halo .content-detail, .rcd-depth-halo .footer-inner {
	box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 42px 6px rgba(255,255,255,0.2);
}
.rcd-depth-halo .row-produk { box-shadow: 0 0 0 1px var(--rcd-accent, #2B518F), 0 4px 14px rgba(0,0,0,0.15); }
/* from the Cloud MIS web app: a soft cast shadow, barely there */
.rcd-depth-app #header, .rcd-depth-app .maincontent, .rcd-depth-app .content-detail, .rcd-depth-app .footer-inner {
	box-shadow: 0 1px 2px rgba(26,24,22,0.06), 0 4px 12px -2px rgba(26,24,22,0.08);
}
.rcd-depth-app .row-produk { box-shadow: 0 1px 2px rgba(26,24,22,0.06), 0 4px 12px -2px rgba(26,24,22,0.08), inset 0 1px 0 rgba(255,255,255,0.9); }

/* ---------- header stripe (the 7px line under the logo bar; same width as before) ---------- */
.rcd-stripe-rainbow #header, .rcd-stripe-rainbow .rcd-strs,
.rcd-stripe-moving #header, .rcd-stripe-moving .rcd-strs {
	border-image: linear-gradient(90deg, #d64545, #e8873a, #e8c33a, #5aa85a, #3a7fc4, #6a4fb5, #a24fb5) 1;
}
.rcd-stripe-gold #header, .rcd-stripe-gold .rcd-strs {
	border-image: linear-gradient(90deg, #8a6a22, #e9cf86 25%, #b8913a 50%, #f3dc9a 75%, #8a6a22) 1;
}
.rcd-stripe-silver #header, .rcd-stripe-silver .rcd-strs {
	border-image: linear-gradient(90deg, #8d939c, #eef1f5 25%, #a9afb8 50%, #f4f6f8 75%, #8d939c) 1;
}
.rcd-stripe-accent #header, .rcd-stripe-accent .rcd-strs { border-bottom-color: var(--rcd-accent, #2B518F); }
@keyframes rcdStripe { from { background-position: 0 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: no-preference) {
	.rcd-stripe-moving #header::after, .rcd-stripe-moving .rcd-strs::after {
		content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; pointer-events: none;
		background-image: linear-gradient(90deg, #d64545, #e8873a, #e8c33a, #5aa85a, #3a7fc4, #6a4fb5, #a24fb5, #d64545);
		background-size: 200% 100%;
		animation: rcdStripe 10s linear infinite;
	}
}

/* ---------- buttons (family tabs, backing buttons, View All) ---------- */
.rcd-buttons-gradient .subcategory a, .rcd-buttons-gradient .rc-backing .rc-backing-btn, .rcd-buttons-gradient .viewall {
	background-image: linear-gradient(rgba(255,255,255,0.28), rgba(0,0,0,0.12));
}
.rcd-buttons-glossy .subcategory a, .rcd-buttons-glossy .rc-backing .rc-backing-btn, .rcd-buttons-glossy .viewall {
	background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.14) 50%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0));
}
.rcd-buttons-raised .subcategory a, .rcd-buttons-raised .rc-backing .rc-backing-btn, .rcd-buttons-raised .viewall {
	box-shadow: 0 3px 0 rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
}
.rcd-buttons-raised .subcategory a:active, .rcd-buttons-raised .rc-backing .rc-backing-btn:active, .rcd-buttons-raised .viewall:active {
	box-shadow: 0 1px 0 rgba(0,0,0,0.28); transform: translateY(2px);
}
.rcd-buttons-outline .subcategory .list-tab:not(.active) a, .rcd-buttons-outline .rc-backing .rc-backing-btn:not(.active) {
	background-color: transparent; box-shadow: inset 0 0 0 2px currentColor;
}
.rcd-buttons-outline .subcategory .list-tab:not(.active) a:hover, .rcd-buttons-outline .rc-backing .rc-backing-btn:not(.active):hover {
	background-color: var(--rcd-btn, #b9c0d0);
}
.rcd-buttons-shine .subcategory a, .rcd-buttons-shine .rc-backing .rc-backing-btn, .rcd-buttons-shine .viewall {
	background-image: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 65%);
	background-size: 250% 100%; background-repeat: no-repeat; background-position: 100% 0;
}
.rcd-buttons-shine .subcategory a:hover, .rcd-buttons-shine .rc-backing .rc-backing-btn:hover, .rcd-buttons-shine .viewall:hover { background-position: 0 0; }
/* from the Cloud MIS web app: raised keys - a soft cast below, a light top edge and a darker
   bottom edge (inset, so nothing changes size); the dropdown and search box look recessed */
.rcd-buttons-keys .subcategory a, .rcd-buttons-keys .rc-backing .rc-backing-btn, .rcd-buttons-keys .viewall,
.rcd-buttons-keysorbit .subcategory a, .rcd-buttons-keysorbit .rc-backing .rc-backing-btn, .rcd-buttons-keysorbit .viewall {
	box-shadow: 0 1px 2px rgba(26,24,22,0.06), 0 4px 12px -2px rgba(26,24,22,0.08), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(26,24,22,0.10);
}
.rcd-buttons-keys .subcategory a:hover, .rcd-buttons-keys .rc-backing .rc-backing-btn:hover, .rcd-buttons-keys .viewall:hover,
.rcd-buttons-keysorbit .subcategory a:hover, .rcd-buttons-keysorbit .rc-backing .rc-backing-btn:hover, .rcd-buttons-keysorbit .viewall:hover {
	box-shadow: 0 2px 4px rgba(26,24,22,0.06), 0 12px 28px -6px rgba(26,24,22,0.14), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(26,24,22,0.10);
}
.rcd-buttons-keys .subcategory a:active, .rcd-buttons-keys .rc-backing .rc-backing-btn:active, .rcd-buttons-keys .viewall:active,
.rcd-buttons-keysorbit .subcategory a:active, .rcd-buttons-keysorbit .rc-backing .rc-backing-btn:active, .rcd-buttons-keysorbit .viewall:active {
	box-shadow: inset 0 2px 4px rgba(26,24,22,0.10), inset 0 -1px 0 rgba(26,24,22,0.06);
}
.rcd-buttons-keys .subcategory a:focus-visible, .rcd-buttons-keys .rc-backing .rc-backing-btn:focus-visible, .rcd-buttons-keys .viewall:focus-visible,
.rcd-buttons-keysorbit .subcategory a:focus-visible, .rcd-buttons-keysorbit .rc-backing .rc-backing-btn:focus-visible, .rcd-buttons-keysorbit .viewall:focus-visible {
	outline: 2px solid var(--rcd-accent, #2A6CB4); outline-offset: 2px;
}
.rcd-buttons-keys .urutan select, .rcd-buttons-keys #txtsearch,
.rcd-buttons-keysorbit .urutan select, .rcd-buttons-keysorbit #txtsearch { box-shadow: inset 0 1px 2px rgba(26,24,22,0.05); }
.rcd-buttons-keys .urutan select:focus, .rcd-buttons-keys #txtsearch:focus,
.rcd-buttons-keysorbit .urutan select:focus, .rcd-buttons-keysorbit #txtsearch:focus {
	box-shadow: inset 0 1px 2px rgba(26,24,22,0.04), 0 0 0 3px #D9E8F6; outline: none;
}

/* ---------- page title style ---------- */
.rcd-headings-embossed .header-product h1, .rcd-headings-embossed .carousel-img h1, .rcd-headings-embossed .blocktitle h1, .rcd-headings-embossed .blocktitle h2, .rcd-headings-embossed .rcd-hd-demo {
	text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 -1px 0 rgba(0,0,0,0.15);
}
.rcd-headings-shadow .header-product h1, .rcd-headings-shadow .carousel-img h1, .rcd-headings-shadow .blocktitle h1, .rcd-headings-shadow .blocktitle h2, .rcd-headings-shadow .rcd-hd-demo {
	text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.rcd-headings-underline .header-product h1, .rcd-headings-underline .blocktitle h1, .rcd-headings-underline .blocktitle h2, .rcd-headings-underline .rcd-hd-demo {
	text-decoration: underline; text-decoration-color: var(--rcd-accent, #2B518F); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.rcd-headings-underline .carousel-img h1 { border-bottom-style: solid; border-bottom-color: var(--rcd-accent, #2B518F); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.rcd-headings-metallic .header-product h1, .rcd-headings-metallic .carousel-img h1, .rcd-headings-metallic .blocktitle h1, .rcd-headings-metallic .blocktitle h2, .rcd-headings-metallic .rcd-hd-demo {
		background-image: linear-gradient(180deg, #d9b863 0%, #a67c2e 42%, #7a5a17 52%, #c9a24a 78%, #8a6a22 100%);
		-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	}
	.rcd-headings-gradient .header-product h1, .rcd-headings-gradient .carousel-img h1, .rcd-headings-gradient .blocktitle h1, .rcd-headings-gradient .blocktitle h2, .rcd-headings-gradient .rcd-hd-demo {
		background-image: linear-gradient(90deg, var(--rcd-accent, #2B518F) 0%, var(--rcd-ink, #001745) 60%);
		-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	}
	.rcd-headings-metallic .header-product h1 .carpet-cat, .rcd-headings-gradient .header-product h1 .carpet-cat { -webkit-text-fill-color: currentColor; }
}

/* ---------- card effect on mouse-over and page animation ----------
   Only for visitors whose device allows motion, and only on these elements, so
   the site's own effects (e.g. the WhatsApp button) are never changed. Hover
   effects use transform/box-shadow/outline only, so nothing around them moves.
   Page animations use fill-mode "backwards": once finished they let go, so hover
   effects keep working. */
@property --rcd-orbit-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rcdOrbitTurn { to { --rcd-orbit-a: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
	.rcd-cards-lift .row-produk, .rcd-cards-tilt .row-produk, .rcd-cards-glow .row-produk,
	.rcd-cards-lift .kecil-bawah, .rcd-cards-tilt .kecil-bawah, .rcd-cards-glow .kecil-bawah {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}
	.rcd-cards-lift .row-produk:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0, 0, 0, 0.25); }
	.rcd-cards-lift .kecil-bawah:hover { transform: translateY(-4px); }
	.rcd-cards-tilt .detail, .rcd-cards-tilt .jcarousel { perspective: 900px; }
	.rcd-cards-tilt .row-produk:hover { transform: rotateX(4deg) rotateY(-7deg) translateY(-4px); box-shadow: 12px 16px 26px rgba(0, 0, 0, 0.25); }
	.rcd-cards-tilt .kecil-bawah:hover { transform: rotateY(-8deg) scale(1.03); }
	.rcd-cards-zoom .large-thumbs img, .rcd-cards-zoom .kecil-bawah img { transition: transform 0.45s ease; }
	.rcd-cards-zoom .row-produk:hover .large-thumbs img, .rcd-cards-zoom .kecil-bawah:hover img { transform: scale(1.06); }

	.rcd-cards-pop .row-produk, .rcd-cards-pop .kecil-bawah { transition: transform 0.25s ease, box-shadow 0.25s ease; }
	.rcd-cards-pop .row-produk:hover { transform: scale(1.05); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); position: relative; z-index: 3; }
	.rcd-cards-pop .kecil-bawah:hover { transform: scale(1.05); }
	.rcd-cards-shine .row-produk { position: relative; }
	.rcd-cards-shine .row-produk::after {
		content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
		background-image: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 65%);
		background-repeat: no-repeat; background-size: 250% 100%; background-position: 100% 0;
		transition: background-position 0.8s ease;
	}
	.rcd-cards-shine .row-produk:hover::after { background-position: 0 0; }
	@keyframes rcdFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
	.rcd-cards-float .row-produk { transition: box-shadow 0.3s ease; }
	.rcd-cards-float .row-produk:hover { animation: rcdFloat 2.4s ease-in-out infinite; box-shadow: 0 18px 26px -10px rgba(0, 0, 0, 0.35); }
	.rcd-cards-float .kecil-bawah:hover { animation: rcdFloat 2.4s ease-in-out infinite; }
	.rcd-cards-frame .row-produk { transition: outline-offset 0.2s ease; }
	.rcd-cards-brighten .large-thumbs img, .rcd-cards-brighten .kecil-bawah img { transition: filter 0.3s ease; }

	/* from the Cloud MIS web app: soft lift, and the orbit dot running round the edge */
	.rcd-cards-applift .row-produk, .rcd-cards-liftorbit .row-produk, .rcd-cards-applift .kecil-bawah, .rcd-cards-liftorbit .kecil-bawah {
		transition: transform 0.3s cubic-bezier(.2,.75,.25,1), box-shadow 0.3s ease;
	}
	.rcd-cards-applift .row-produk:hover, .rcd-cards-liftorbit .row-produk:hover {
		transform: translateY(-4px);
		box-shadow: 0 2px 4px rgba(26,24,22,0.06), 0 12px 28px -6px rgba(26,24,22,0.14), inset 0 1px 0 rgba(255,255,255,0.9);
	}
	.rcd-cards-applift .kecil-bawah:hover, .rcd-cards-liftorbit .kecil-bawah:hover { transform: translateY(-4px); }
	.rcd-buttons-orbit .subcategory a,
	.rcd-buttons-orbit .rc-backing .rc-backing-btn,
	.rcd-buttons-keysorbit .subcategory a,
	.rcd-buttons-keysorbit .rc-backing .rc-backing-btn,
	.rcd-cards-orbit .row-produk,
	.rcd-cards-liftorbit .row-produk { position: relative; }
	.rcd-buttons-orbit .subcategory a::after,
	.rcd-buttons-orbit .rc-backing .rc-backing-btn::after,
	.rcd-buttons-orbit .carpet .viewall::after,
	.rcd-buttons-orbit .content-bottom .viewall::after,
	.rcd-buttons-keysorbit .subcategory a::after,
	.rcd-buttons-keysorbit .rc-backing .rc-backing-btn::after,
	.rcd-buttons-keysorbit .carpet .viewall::after,
	.rcd-buttons-keysorbit .content-bottom .viewall::after,
	.rcd-cards-orbit .row-produk::after,
	.rcd-cards-liftorbit .row-produk::after {
		content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 2px; z-index: 2;
		background: conic-gradient(from var(--rcd-orbit-a), rgba(255,255,255,0) 0deg 300deg, var(--rcd-orbit-t, rgba(42,108,180,0.3)) 338deg, var(--rcd-orbit-c, #2A6CB4) 352deg, var(--rcd-orbit-c, #2A6CB4) 357deg, rgba(255,255,255,0) 359deg 360deg);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
		filter: drop-shadow(0 0 3px var(--rcd-orbit-g, rgba(42,108,180,0.7))) drop-shadow(0 0 1px var(--rcd-orbit-g, rgba(42,108,180,0.7)));
		opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
	}
	.rcd-buttons-orbit .subcategory a:hover::after,
	.rcd-buttons-orbit .rc-backing .rc-backing-btn:hover::after,
	.rcd-buttons-orbit .carpet .viewall:hover::after,
	.rcd-buttons-orbit .content-bottom .viewall:hover::after,
	.rcd-buttons-keysorbit .subcategory a:hover::after,
	.rcd-buttons-keysorbit .rc-backing .rc-backing-btn:hover::after,
	.rcd-buttons-keysorbit .carpet .viewall:hover::after,
	.rcd-buttons-keysorbit .content-bottom .viewall:hover::after,
	.rcd-cards-orbit .row-produk:hover::after,
	.rcd-cards-liftorbit .row-produk:hover::after,
	.rcd-buttons-orbit .subcategory a:focus-visible::after,
	.rcd-buttons-orbit .rc-backing .rc-backing-btn:focus-visible::after,
	.rcd-buttons-orbit .carpet .viewall:focus-visible::after,
	.rcd-buttons-orbit .content-bottom .viewall:focus-visible::after,
	.rcd-buttons-keysorbit .subcategory a:focus-visible::after,
	.rcd-buttons-keysorbit .rc-backing .rc-backing-btn:focus-visible::after,
	.rcd-buttons-keysorbit .carpet .viewall:focus-visible::after,
	.rcd-buttons-keysorbit .content-bottom .viewall:focus-visible::after,
	.rcd-cards-orbit .row-produk:focus-visible::after,
	.rcd-cards-liftorbit .row-produk:focus-visible::after { opacity: 1; animation: rcdOrbitTurn 1.8s linear infinite; }
	.rcd-buttons-orbit .subcategory .active a::after,
	.rcd-buttons-orbit .rc-backing .rc-backing-btn.active::after,
	.rcd-buttons-orbit .carpet .viewall::after,
	.rcd-buttons-orbit .content-bottom .viewall::after,
	.rcd-buttons-keysorbit .subcategory .active a::after,
	.rcd-buttons-keysorbit .rc-backing .rc-backing-btn.active::after,
	.rcd-buttons-keysorbit .carpet .viewall::after,
	.rcd-buttons-keysorbit .content-bottom .viewall::after { --rcd-orbit-c: #ffffff; --rcd-orbit-t: rgba(255,255,255,0.4); --rcd-orbit-g: rgba(255,255,255,0.95); }
	@supports (color: color-mix(in srgb, red 50%, transparent)) {
		body.rcd { --rcd-orbit-c: var(--rcd-accent, #2A6CB4); --rcd-orbit-t: color-mix(in srgb, var(--rcd-accent, #2A6CB4) 30%, transparent); --rcd-orbit-g: color-mix(in srgb, var(--rcd-accent, #2A6CB4) 70%, transparent); }
	}

	@keyframes rcdFade { from { opacity: 0; } to { opacity: 1; } }
	@keyframes rcdRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
	@keyframes rcdSlide { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
	@keyframes rcdZoomIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
	@keyframes rcdBlurIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
	@keyframes rcdFlipIn { from { opacity: 0; transform: perspective(700px) rotateX(-55deg); transform-origin: 50% 0; } to { opacity: 1; transform: none; transform-origin: 50% 0; } }
	@keyframes rcdDrop { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
	@keyframes rcdArrive { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
	.rcd-motion-fade .header-product, .rcd-motion-fade .tab-wrapper, .rcd-motion-fade .detail,
	.rcd-motion-fade .carousel-img, .rcd-motion-fade .content-top, .rcd-motion-fade .blocktitle {
		animation: rcdFade 0.8s ease backwards;
	}
	.rcd-motion-fade .tab-wrapper { animation-delay: 0.1s; }
	.rcd-motion-fade .detail, .rcd-motion-fade .carousel-img { animation-delay: 0.2s; }
	.rcd-motion-rise .header-product, .rcd-motion-rise .tab-wrapper, .rcd-motion-rise .blocktitle,
	.rcd-motion-slide .header-product,
	.rcd-motion-slide .tab-wrapper,
	.rcd-motion-slide .blocktitle,
	.rcd-motion-zoom .header-product,
	.rcd-motion-zoom .tab-wrapper,
	.rcd-motion-zoom .blocktitle,
	.rcd-motion-blur .header-product,
	.rcd-motion-blur .tab-wrapper,
	.rcd-motion-blur .blocktitle,
	.rcd-motion-flip .header-product,
	.rcd-motion-flip .tab-wrapper,
	.rcd-motion-flip .blocktitle,
	.rcd-motion-drop .header-product,
	.rcd-motion-drop .tab-wrapper,
	.rcd-motion-drop .blocktitle { animation: rcdFade 0.6s ease backwards; }
	.rcd-motion-rise .row-produk, .rcd-motion-rise .carousel-img, .rcd-motion-rise .content-top .carpet { animation: rcdRise 0.6s ease backwards; }
	.rcd-motion-slide .row-produk, .rcd-motion-slide .carousel-img, .rcd-motion-slide .content-top .carpet { animation: rcdSlide 0.6s ease backwards; }
	.rcd-motion-zoom .row-produk, .rcd-motion-zoom .carousel-img, .rcd-motion-zoom .content-top .carpet { animation: rcdZoomIn 0.6s ease backwards; }
	.rcd-motion-blur .row-produk, .rcd-motion-blur .carousel-img, .rcd-motion-blur .content-top .carpet { animation: rcdBlurIn 0.7s ease backwards; }
	.rcd-motion-flip .row-produk, .rcd-motion-flip .carousel-img, .rcd-motion-flip .content-top .carpet { animation: rcdFlipIn 0.7s ease backwards; }
	.rcd-motion-drop .row-produk, .rcd-motion-drop .carousel-img, .rcd-motion-drop .content-top .carpet { animation: rcdDrop 0.6s ease backwards; }
	.rcd-motion-rise .row-produk:nth-child(2),
	.rcd-motion-rise .content-top .col-3:nth-child(2) .carpet,
	.rcd-motion-slide .row-produk:nth-child(2),
	.rcd-motion-slide .content-top .col-3:nth-child(2) .carpet,
	.rcd-motion-zoom .row-produk:nth-child(2),
	.rcd-motion-zoom .content-top .col-3:nth-child(2) .carpet,
	.rcd-motion-blur .row-produk:nth-child(2),
	.rcd-motion-blur .content-top .col-3:nth-child(2) .carpet,
	.rcd-motion-flip .row-produk:nth-child(2),
	.rcd-motion-flip .content-top .col-3:nth-child(2) .carpet,
	.rcd-motion-drop .row-produk:nth-child(2),
	.rcd-motion-drop .content-top .col-3:nth-child(2) .carpet { animation-delay: 0.08s; }
	.rcd-motion-rise .row-produk:nth-child(3),
	.rcd-motion-rise .content-top .col-3:nth-child(3) .carpet,
	.rcd-motion-slide .row-produk:nth-child(3),
	.rcd-motion-slide .content-top .col-3:nth-child(3) .carpet,
	.rcd-motion-zoom .row-produk:nth-child(3),
	.rcd-motion-zoom .content-top .col-3:nth-child(3) .carpet,
	.rcd-motion-blur .row-produk:nth-child(3),
	.rcd-motion-blur .content-top .col-3:nth-child(3) .carpet,
	.rcd-motion-flip .row-produk:nth-child(3),
	.rcd-motion-flip .content-top .col-3:nth-child(3) .carpet,
	.rcd-motion-drop .row-produk:nth-child(3),
	.rcd-motion-drop .content-top .col-3:nth-child(3) .carpet { animation-delay: 0.16s; }
	.rcd-motion-rise .row-produk:nth-child(4),
	.rcd-motion-rise .content-top .col-3:nth-child(4) .carpet,
	.rcd-motion-slide .row-produk:nth-child(4),
	.rcd-motion-slide .content-top .col-3:nth-child(4) .carpet,
	.rcd-motion-zoom .row-produk:nth-child(4),
	.rcd-motion-zoom .content-top .col-3:nth-child(4) .carpet,
	.rcd-motion-blur .row-produk:nth-child(4),
	.rcd-motion-blur .content-top .col-3:nth-child(4) .carpet,
	.rcd-motion-flip .row-produk:nth-child(4),
	.rcd-motion-flip .content-top .col-3:nth-child(4) .carpet,
	.rcd-motion-drop .row-produk:nth-child(4),
	.rcd-motion-drop .content-top .col-3:nth-child(4) .carpet { animation-delay: 0.24s; }
	.rcd-motion-rise .row-produk:nth-child(5),
	.rcd-motion-rise .content-top .col-3:nth-child(5) .carpet,
	.rcd-motion-slide .row-produk:nth-child(5),
	.rcd-motion-slide .content-top .col-3:nth-child(5) .carpet,
	.rcd-motion-zoom .row-produk:nth-child(5),
	.rcd-motion-zoom .content-top .col-3:nth-child(5) .carpet,
	.rcd-motion-blur .row-produk:nth-child(5),
	.rcd-motion-blur .content-top .col-3:nth-child(5) .carpet,
	.rcd-motion-flip .row-produk:nth-child(5),
	.rcd-motion-flip .content-top .col-3:nth-child(5) .carpet,
	.rcd-motion-drop .row-produk:nth-child(5),
	.rcd-motion-drop .content-top .col-3:nth-child(5) .carpet { animation-delay: 0.32s; }
	.rcd-motion-rise .content-top .col-3:nth-child(6) .carpet,
	.rcd-motion-slide .content-top .col-3:nth-child(6) .carpet,
	.rcd-motion-zoom .content-top .col-3:nth-child(6) .carpet,
	.rcd-motion-blur .content-top .col-3:nth-child(6) .carpet,
	.rcd-motion-flip .content-top .col-3:nth-child(6) .carpet,
	.rcd-motion-drop .content-top .col-3:nth-child(6) .carpet { animation-delay: 0.40s; }
	.rcd-motion-rise .baris:nth-child(n+2) .row-produk,
	.rcd-motion-slide .baris:nth-child(n+2) .row-produk,
	.rcd-motion-zoom .baris:nth-child(n+2) .row-produk,
	.rcd-motion-blur .baris:nth-child(n+2) .row-produk,
	.rcd-motion-flip .baris:nth-child(n+2) .row-produk,
	.rcd-motion-drop .baris:nth-child(n+2) .row-produk { animation-delay: 0.35s; }
	/* from the Cloud MIS web app: tiles arrive one after another (28ms apart), headings fade in */
	.rcd-motion-arrival .header-product, .rcd-motion-arrival .tab-wrapper, .rcd-motion-arrival .blocktitle { animation: rcdFade 0.6s ease-out backwards; }
	.rcd-motion-arrival .row-produk, .rcd-motion-arrival .carousel-img, .rcd-motion-arrival .content-top .carpet {
		animation: rcdArrive 0.5s cubic-bezier(.2,.75,.25,1) backwards;
		animation-delay: calc((var(--rcd-row, 0) * 5 + var(--rcd-i, 0)) * 28ms);
	}
	.rcd-motion-arrival .baris:nth-child(2) { --rcd-row: 1; }
	.rcd-motion-arrival .baris:nth-child(3) { --rcd-row: 2; }
	.rcd-motion-arrival .baris:nth-child(4) { --rcd-row: 3; }
	.rcd-motion-arrival .baris:nth-child(5) { --rcd-row: 4; }
	.rcd-motion-arrival .baris:nth-child(6) { --rcd-row: 5; }
	.rcd-motion-arrival .baris:nth-child(n+7) { --rcd-row: 6; }
	.rcd-motion-arrival .row-produk:nth-child(2), .rcd-motion-arrival .content-top .col-3:nth-child(2) .carpet { --rcd-i: 1; }
	.rcd-motion-arrival .row-produk:nth-child(3), .rcd-motion-arrival .content-top .col-3:nth-child(3) .carpet { --rcd-i: 2; }
	.rcd-motion-arrival .row-produk:nth-child(4), .rcd-motion-arrival .content-top .col-3:nth-child(4) .carpet { --rcd-i: 3; }
	.rcd-motion-arrival .row-produk:nth-child(5), .rcd-motion-arrival .content-top .col-3:nth-child(5) .carpet { --rcd-i: 4; }
	.rcd-motion-arrival .content-top .col-3:nth-child(6) .carpet { --rcd-i: 5; }
	body[class*="rcd-motion-"] .rc-backing-btn,
	body[class*="rcd-motion-"] .subcategory a,
	body[class*="rcd-motion-"] .viewall,
	body[class*="rcd-motion-"] .nav > ul > li > a,
	body[class*="rcd-motion-"] .rc-structure a {
		transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
	}
	.rcd-motion-smooth .row-produk, .rcd-motion-smooth .kecil-bawah img, .rcd-motion-smooth .colour-list > li {
		transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	}
	.rcd-buttons-shine .subcategory a,
	.rcd-buttons-shine .rc-backing .rc-backing-btn,
	.rcd-buttons-shine .viewall { transition: background-position 0.7s ease, background-color 0.25s ease, color 0.25s ease; }
	.rcd-buttons-keys .subcategory a,
	.rcd-buttons-keys .rc-backing .rc-backing-btn,
	.rcd-buttons-keys .viewall,
	.rcd-buttons-keysorbit .subcategory a,
	.rcd-buttons-keysorbit .rc-backing .rc-backing-btn,
	.rcd-buttons-keysorbit .viewall,
	.rcd-buttons-raised .subcategory a,
	.rcd-buttons-raised .rc-backing .rc-backing-btn,
	.rcd-buttons-raised .viewall {
		transition-property: transform, box-shadow, background-color, border-color;
		transition-duration: 150ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}
	.rcd-buttons-keys .subcategory a:hover,
	.rcd-buttons-keys .rc-backing .rc-backing-btn:hover,
	.rcd-buttons-keysorbit .subcategory a:hover,
	.rcd-buttons-keysorbit .rc-backing .rc-backing-btn:hover { transform: translateY(-1px); }
	.rcd-buttons-keys .subcategory a:active,
	.rcd-buttons-keys .rc-backing .rc-backing-btn:active,
	.rcd-buttons-keysorbit .subcategory a:active,
	.rcd-buttons-keysorbit .rc-backing .rc-backing-btn:active { transform: translateY(1px); }
	.rcd-buttons-keys .urutan select,
	.rcd-buttons-keys #txtsearch,
	.rcd-buttons-keysorbit .urutan select,
	.rcd-buttons-keysorbit #txtsearch { transition: box-shadow 150ms ease; }
}
/* no movement, so offered to everyone */
.rcd-cards-glow .row-produk:hover { box-shadow: 0 0 0 2px var(--rcd-accent, #2B518F), 0 8px 24px rgba(0, 0, 0, 0.25); }
.rcd-cards-glow .kecil-bawah:hover { box-shadow: 0 0 0 2px var(--rcd-accent, #2B518F), 0 6px 18px rgba(0, 0, 0, 0.2); }
.rcd-cards-frame .row-produk:hover { outline: 2px solid var(--rcd-accent, #2B518F); outline-offset: 3px; }
.rcd-cards-brighten .row-produk:hover .large-thumbs img, .rcd-cards-brighten .kecil-bawah:hover img { filter: brightness(1.08) contrast(1.06) saturate(1.15); }

/* ---------- corners ---------- */
.rcd-corners-soft .maincontent, .rcd-corners-soft .content-detail, .rcd-corners-soft .footer-inner { border-radius: 4px; }
.rcd-corners-soft .row-produk, .rcd-corners-soft .subcategory a, .rcd-corners-soft .rc-backing-btn,
.rcd-corners-soft .viewall, .rcd-corners-soft .urutan select { border-radius: 3px; }
.rcd-corners-round .maincontent, .rcd-corners-round .content-detail, .rcd-corners-round .footer-inner,
.rcd-corners-pill .maincontent, .rcd-corners-pill .content-detail, .rcd-corners-pill .footer-inner { border-radius: 12px; }
.rcd-corners-round .row-produk, .rcd-corners-pill .row-produk { border-radius: 8px; }
.rcd-corners-round .large-thumbs img, .rcd-corners-pill .large-thumbs img,
.rcd-corners-round .cat-img img, .rcd-corners-pill .cat-img img { border-radius: 6px; }
.rcd-corners-round .subcategory a, .rcd-corners-round .rc-backing-btn, .rcd-corners-round .viewall,
.rcd-corners-round .urutan select, .rcd-corners-round .detail-tab-produk { border-radius: 6px; }
.rcd-corners-pill .subcategory a, .rcd-corners-pill .rc-backing-btn, .rcd-corners-pill .viewall,
.rcd-corners-pill .urutan select, .rcd-corners-pill .cat-abstract .rc-structure li.active a { border-radius: 999px; }

/* ---------- heading font (page titles and section headings only, not card names) ---------- */
.rcd-font-elegant h1, .rcd-font-elegant h2 { font-family: 'Playfair Display', Georgia, serif; letter-spacing: 0.3px; }
.rcd-font-modern h1, .rcd-font-modern h2 { font-family: 'Montserrat', Arial, sans-serif; letter-spacing: 0.4px; }
.rcd-font-classic h1, .rcd-font-classic h2 { font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: 0.4px; }
.rcd-font-cinzel h1, .rcd-font-cinzel h2 { font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.3px; }
.rcd-font-lora h1, .rcd-font-lora h2 { font-family: 'Lora', Georgia, serif; letter-spacing: 0.2px; }
.rcd-font-raleway h1, .rcd-font-raleway h2 { font-family: 'Raleway', Arial, sans-serif; letter-spacing: 0.4px; }
.rcd-font-poppins h1, .rcd-font-poppins h2 { font-family: 'Poppins', Arial, sans-serif; letter-spacing: 0.2px; }
.rcd-font-josefin h1, .rcd-font-josefin h2 { font-family: 'Josefin Sans', Arial, sans-serif; letter-spacing: 0.4px; }
.rcd-font-plex h1, .rcd-font-plex h2 { font-family: 'IBM Plex Sans', Arial, sans-serif; letter-spacing: 0.2px; }
/* the wider fonts are set 1px smaller in the home page tiles, so every tile title stays on two lines and nothing below it moves */
.rcd-font-elegant .content-top .col-3 h2, .rcd-font-modern .content-top .col-3 h2, .rcd-font-cinzel .content-top .col-3 h2,
.rcd-font-lora .content-top .col-3 h2, .rcd-font-josefin .content-top .col-3 h2 { font-size: 14px; letter-spacing: 0; }

/* ---------- phones & tablets: "Optimised layout" ----------
   Only below 1000px wide (phones, and iPads/tablets held upright). Desktops and
   tablets in landscape keep the original layout exactly. "Fit whole page to screen"
   needs no CSS: it only changes the viewport line (see rc_design.php). */
@media (max-width: 999px) {
	body.rcd-mobile-responsive { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	.rcd-mobile-responsive .row { width: auto; }
	.rcd-mobile-responsive [class^="col-"] { float: none; width: auto; margin-right: 0; }

	/* header: logo on top, menu wraps onto as many lines as it needs */
	.rcd-mobile-responsive #header { min-width: 0; height: auto; }
	.rcd-mobile-responsive #header .row { min-height: 95px; }
	.rcd-mobile-responsive #header .row::after { content: ''; display: table; clear: both; }
	.rcd-mobile-responsive .logo { margin-left: 8px; }
	.rcd-mobile-responsive .sublogoimg { max-width: calc(100vw - 190px); height: auto; }
	.rcd-mobile-responsive .menu { float: none; clear: both; height: auto; padding: 8px 0 6px; }
	.rcd-mobile-responsive .nav { width: auto; height: auto; top: 0; margin-left: 0; }
	.rcd-mobile-responsive .nav span.left, .rcd-mobile-responsive .nav span.right { display: none; }
	.rcd-mobile-responsive .nav > ul { flex-wrap: wrap; justify-content: center; }
	.rcd-mobile-responsive .nav > ul > li { background-size: 1px 100%; }
	.rcd-mobile-responsive .nav > ul > li > a { padding: 12px 11px; font-size: 12px; }
	.rcd-mobile-responsive .nav > ul > li.dir { position: static; }
	.rcd-mobile-responsive .nav ul ul.sub { left: 0; right: 0; top: 100%; z-index: 5; }
	.rcd-mobile-responsive .nav ul li ul li { width: auto; height: auto; }
	.rcd-mobile-responsive .nav ul.sub li a { padding: 12px 16px; }
	.rcd-mobile-responsive .top-login { right: 8px; }
	.rcd-mobile-responsive .search-cat { position: absolute; top: 33px; left: 0; right: 0; }
	.rcd-mobile-responsive .search-cat img { right: 8px; }
	.rcd-mobile-responsive .search-cat > span { right: 40px; }
	.rcd-mobile-responsive .searhproduct { right: 8px; width: auto; z-index: 6; }

	/* page panel fills the screen */
	.rcd-mobile-responsive .maincontent { display: block; }
	.rcd-mobile-responsive .content-detail { padding-left: 8px; padding-right: 8px; }
	.rcd-mobile-responsive .maincontent img:not(#app-large), .rcd-mobile-responsive .content-detail img:not(#app-large) { max-width: 100%; height: auto; }
	.rcd-mobile-responsive .slideshow, .rcd-mobile-responsive .callbacks_container, .rcd-mobile-responsive .rslides { width: auto; max-width: 100%; }

	/* home page */
	.rcd-mobile-responsive .content-top .col-3 { float: left; width: 33.333%; }
	.rcd-mobile-responsive .content-bottom { display: block; text-align: center; }
	.rcd-mobile-responsive .content-bottom .viewall { left: 0; top: 0; margin: 6px 3px; }
	.rcd-mobile-responsive .virtualroom, .rcd-mobile-responsive .patternmaker { width: auto; margin: 10px 0; background-size: cover; }
	.rcd-mobile-responsive .virtualroom > p, .rcd-mobile-responsive .patternmaker > p { width: auto; max-width: 60%; }

	/* range page: text, then the photo; buttons wrap; cards flow in a centred grid */
	.rcd-mobile-responsive .header-product, .rcd-mobile-responsive .blocktitle { margin: 10px 4px; padding: 10px 6px; }
	.rcd-mobile-responsive .cat-abstract { width: auto; }
	.rcd-mobile-responsive .cat-img { position: static; margin-top: 10px; }
	.rcd-mobile-responsive .rc-tile-header .cat-abstract { flex: 1 1 auto; min-width: 0; }
	.rcd-mobile-responsive .rc-tile-header .cat-img { flex: 0 0 42%; margin: 0 0 0 16px; }
	.rcd-mobile-responsive .cat-img img { width: 100%; height: auto; }
	.rcd-mobile-responsive .tab-wrapper { justify-content: center; }
	.rcd-mobile-responsive .tab-wrapper .subcategory { margin-left: 0; }
	.rcd-mobile-responsive .rc-backing, .rcd-mobile-responsive .subcategory { flex-wrap: wrap; justify-content: center; }
	.rcd-mobile-responsive .rc-backing-btn, .rcd-mobile-responsive .subcategory a { margin: 0 4px 8px; }
	.rcd-mobile-responsive .urutan { padding: 10px 8px; }
	.rcd-mobile-responsive .detail { display: block; margin: 15px 0 10px; padding-left: 0; }
	.rcd-mobile-responsive .row-produk { margin: 0 6px 18px; }
	.rcd-mobile-responsive .detail:has(> .baris > .row-produk) { display: flex; flex-wrap: wrap; justify-content: center; }
	.rcd-mobile-responsive .detail:has(> .baris > .row-produk) > .baris { display: contents; }
	.rcd-mobile-responsive .detail:has(> .baris > .row-produk) .row-produk { float: none; }

	/* product page: tabs, then the room photo, then the carousels */
	.rcd-mobile-responsive .cat-abstract-single .carpet-cat { position: static; display: block; margin-top: 4px; }
	.rcd-mobile-responsive #sidebar-produk, .rcd-mobile-responsive #content-produk { float: none; width: auto; }
	.rcd-mobile-responsive #content-produk { height: auto; margin-top: 12px; }
	.rcd-mobile-responsive .detail-tab-produk { width: auto; }
	.rcd-mobile-responsive .d-produk { width: auto; margin: 15px 12px; }
	.rcd-mobile-responsive .nav-produk > li a { padding: 20px 14px 0; height: 59px; box-sizing: border-box; } /* tab as tall as its arrow picture */
	.rcd-mobile-responsive .application-img { height: 0; padding-bottom: 74.95%; }
	.rcd-mobile-responsive .carousel-img { width: auto; }
	.rcd-mobile-responsive .jcarousel-wrapper { width: auto; margin: 10px 40px 20px; }
	.rcd-mobile-responsive .jcarousel { width: auto; }
	.rcd-mobile-responsive .jcarousel-control-prev { left: -38px; }
	.rcd-mobile-responsive .jcarousel-control-next { right: -38px; }

	/* other catalogue pages */
	.rcd-mobile-responsive .printed-gel, .rcd-mobile-responsive .catalog-back { width: auto; }
	.rcd-mobile-responsive .catalogprintedgelcat { display: flex; flex-wrap: wrap; justify-content: center; }
	.rcd-mobile-responsive .catalogprintedgelcat > li { float: none; }
	.rcd-mobile-responsive table.table { width: 100%; margin-left: 0; margin-right: 0; }
	.rcd-mobile-responsive .row-content { display: flex; flex-wrap: wrap; justify-content: center; }
	.rcd-mobile-responsive .row-content li { float: none; }
	.rcd-mobile-responsive #contactform { float: none; }
	.rcd-mobile-responsive .content-detail table { max-width: 100%; }
	.rcd-mobile-responsive #contactform, .rcd-mobile-responsive #contactform table { width: 100%; }
	.rcd-mobile-responsive #contactform input[type="text"], .rcd-mobile-responsive #contactform textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
	.rcd-mobile-responsive #noteafter table, .rcd-mobile-responsive #noteafter tbody,
	.rcd-mobile-responsive #noteafter tr, .rcd-mobile-responsive #noteafter td { display: block; width: auto; }

	/* flip-book catalogues (printed carpet, printed gel rugs): the book sizes itself to the
	   screen; give it the full width and keep its invisible 922px stage from widening the page */
	.rcd-mobile-responsive .content-detail:has(.magazine-viewport) { padding-left: 0; padding-right: 0; }
	.rcd-mobile-responsive .content-detail .block { display: block; }
	.rcd-mobile-responsive #canvas { overflow: hidden; overflow-x: clip; overflow-y: visible; }
	.rcd-mobile-responsive .turnjs-slider { width: auto; max-width: 100%; }
	.rcd-mobile-responsive .turnjs-slider .ui-slider { width: auto; margin-left: 30px; margin-right: 30px; }

	/* footer */
	.rcd-mobile-responsive .footer-inner { height: auto; margin-bottom: 12px; }
	.rcd-mobile-responsive .footer-inner-top { background-size: cover; background-position: 0 50%; }
	.rcd-mobile-responsive .footer-inner-bottom::after { content: ''; display: table; clear: both; }
	.rcd-mobile-responsive .copyright { float: none; margin: 0 10px; text-align: center; }
	.rcd-mobile-responsive .terms { padding-left: 0; }
	.rcd-mobile-responsive .terms li { margin: 0 14px 8px 0; }
}
@media (max-width: 599px) {
	.rcd-mobile-responsive .rc-tile-header { flex-wrap: wrap; }
	.rcd-mobile-responsive .rc-tile-header .cat-abstract { flex: 1 1 100%; }
	.rcd-mobile-responsive .rc-tile-header .cat-img { flex: 1 1 100%; margin: 12px 0 0; }
	.rcd-mobile-responsive .content-top .col-3 { width: 50%; }
	.rcd-mobile-responsive .search-cat > span { display: none; }
	.rcd-mobile-responsive .header-product h1 { font-size: 21px; }
	.rcd-mobile-responsive .virtualroom > p, .rcd-mobile-responsive .patternmaker > p { max-width: none; }
}

/* ---------- preview bar (only for a Super Administrator who is previewing) ---------- */
.rcd-preview-bar {
	position: fixed;
	left: 10px;
	bottom: 10px;
	z-index: 100000;
	padding: 8px 14px;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font: 13px Arial, Helvetica, sans-serif;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.rcd-preview-bar a { color: #ffd479; font-weight: bold; }