/*
 * Coway Lippo Mall Nusantara theme styles.
 *
 * Coway's look (coway.id: Noto Sans, the logo's sky blue) on the layout in
 * clients/coway-lmn/design/reference-board.md. The page is Elementor
 * containers; the .cw-* classes below are applied to Elementor widgets and
 * containers (Advanced → CSS Classes) to give them that look.
 */

/* ------------------------------------------------------------------ tokens */
:root {
	--cw-sky: #08A4E4;        /* logo */
	--cw-blue: #0071BC;       /* links, secondary buttons (AA on white) */
	--cw-deep: #063F7A;       /* dark bands */
	--cw-ink: #102A43;
	--cw-muted: #52667A;
	--cw-line: #DCE7F0;
	--cw-ice: #EFF7FC;
	--cw-ice-2: #E2F1FA;
	--cw-wa: #0B7F41;         /* WhatsApp buttons: white text passes AA */
	--cw-wa-hover: #08692F;
	--cw-wa-bright: #25D366;  /* icon-only floating button */
	--cw-shadow-sm: 0 2px 10px rgba(6, 63, 122, .06);
	--cw-shadow-md: 0 16px 36px rgba(6, 63, 122, .13);
	--cw-radius: 20px;
	--cw-container: 1240px;
	--cw-gutter: 32px;
	--cw-sans: 'Noto Sans', Arial, sans-serif;
	--cw-header-h: 70px;
}
@media (max-width: 767px) {
	:root { --cw-gutter: 20px; }
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: #fff;
	color: var(--cw-ink);
	font-family: var(--cw-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--cw-blue); text-decoration: none; }
a:hover { color: var(--cw-deep); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p { text-wrap: pretty; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cw-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
.admin-bar { --cw-admin-bar: 32px; }

:focus-visible { outline: 3px solid var(--cw-sky); outline-offset: 2px; }

.cw-skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	padding: 10px 16px; border-radius: 8px; background: var(--cw-deep); color: #fff; font-weight: 600;
}
.cw-skip-link:focus { top: 12px; color: #fff; }

.cw-container {
	width: 100%;
	max-width: var(--cw-container);
	margin-inline: auto;
	padding-inline: var(--cw-gutter);
}
.cw-container--narrow { max-width: 860px; }
.cw-icon { flex: none; }

/* ----------------------------------------------------------------- buttons */
.cw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
	font-family: var(--cw-sans); font-weight: 700; font-size: 16px; line-height: 1.2;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.cw-btn--lg { padding: 16px 30px; font-size: 17px; }
.cw-btn--sm { padding: 10px 18px; font-size: 14.5px; gap: 8px; }
.cw-btn--block { display: flex; width: 100%; }
.cw-btn--wa { background: var(--cw-wa); color: #fff; box-shadow: 0 10px 24px rgba(11, 127, 65, .22); }
.cw-btn--wa:hover, .cw-btn--wa:focus-visible { background: var(--cw-wa-hover); color: #fff; }
.cw-btn--wa.cw-btn--on-dark { box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.cw-btn--blue { background: var(--cw-blue); color: #fff; }
.cw-btn--blue:hover { background: var(--cw-deep); color: #fff; }
.cw-btn--outline { background: #fff; border-color: var(--cw-line); color: var(--cw-deep); }
.cw-btn--outline:hover { border-color: var(--cw-blue); color: var(--cw-blue); }
@media (max-width: 480px) {
	.cw-btn { white-space: normal; text-align: center; }
}

.cw-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Elementor Button widget, restyled: add "cw-ebtn cw-ebtn--outline" (or blue,
   white) to the widget's CSS classes. */
.cw-ebtn .elementor-button {
	display: inline-flex; align-items: center; padding: 16px 28px; border-radius: 999px;
	border: 1.5px solid transparent; font-family: var(--cw-sans); font-weight: 700;
	font-size: 17px; line-height: 1.2; fill: currentColor;
	transition: background-color .15s, border-color .15s, color .15s;
}
.cw-ebtn--sm .elementor-button { padding: 10px 18px; font-size: 14.5px; }
.cw-ebtn--outline .elementor-button { background: #fff; border-color: var(--cw-line); color: var(--cw-deep); }
.cw-ebtn--outline .elementor-button:hover { border-color: var(--cw-blue); color: var(--cw-blue); }
.cw-ebtn--blue .elementor-button { background: var(--cw-blue); color: #fff; }
.cw-ebtn--blue .elementor-button:hover { background: var(--cw-deep); color: #fff; }
.cw-ebtn--link .elementor-button { background: none; padding: 4px 0; border-radius: 0; color: var(--cw-blue); font-size: 15px; }
.cw-ebtn--link .elementor-button:hover { color: var(--cw-deep); text-decoration: underline; }

/* ------------------------------------------------------------------ header */
.cw-header {
	position: sticky; top: var(--cw-admin-bar, 0px); z-index: 50;
	background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--cw-line);
}
.cw-header__bar { min-height: var(--cw-header-h); padding-block: 12px; display: flex; align-items: center; gap: 20px; }
.cw-header__brand { display: flex; align-items: center; gap: 12px; flex: none; color: var(--cw-ink); }
.cw-header__logo { width: 118px; height: auto; display: block; }
.cw-header__store {
	padding-left: 12px; border-left: 1px solid var(--cw-line);
	font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--cw-muted); max-width: 11ch;
}
.cw-nav { margin-left: auto; }
.cw-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.cw-nav__list a {
	display: block; padding: 9px 14px; border-radius: 999px;
	font-size: 15px; font-weight: 500; color: var(--cw-muted); white-space: nowrap;
}
.cw-nav__list a:hover { background: var(--cw-ice); color: var(--cw-deep); }
.cw-header__cta { flex: none; }

@media (max-width: 1023px) {
	/* One page: the section links become a scrolling row under the bar. */
	.cw-header__bar { flex-wrap: wrap; row-gap: 6px; padding-bottom: 0; }
	.cw-header__cta { margin-left: auto; }
	.cw-nav {
		order: 3; flex-basis: 100%; margin: 0 calc(var(--cw-gutter) * -1);
		overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.cw-nav::-webkit-scrollbar { display: none; }
	.cw-nav__list { padding: 0 var(--cw-gutter) 8px; }
	.cw-nav__list a { padding: 7px 12px; font-size: 14px; background: var(--cw-ice); }
	html { scroll-padding-top: 120px; }
}
@media (max-width: 420px) {
	.cw-header__store { display: none; }
}
@media (max-width: 782px) {
	.admin-bar { --cw-admin-bar: 46px; }
}
@media (max-width: 600px) {
	.admin-bar { --cw-admin-bar: 0px; }
}

/* ---------------------------------------------------------- page sections */
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child { margin-bottom: 0; }
.elementor-widget-text-editor p:first-child { margin-top: 0; }

.cw-eyebrow {
	font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cw-blue);
}
.cw-h1 .elementor-heading-title,
.cw-hero__title .elementor-heading-title {
	font-family: var(--cw-sans); font-weight: 800; font-size: clamp(34px, 5vw, 56px);
	line-height: 1.08; letter-spacing: -.02em; color: var(--cw-deep);
}
.cw-h2 .elementor-heading-title {
	font-family: var(--cw-sans); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.15; letter-spacing: -.015em; color: var(--cw-deep);
}
.cw-h2--light .elementor-heading-title { color: #fff; }
.cw-h3 .elementor-heading-title {
	font-family: var(--cw-sans); font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--cw-deep);
}
.cw-h3-lg .elementor-heading-title {
	font-family: var(--cw-sans); font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--cw-deep);
}
.cw-lead { font-size: 17.5px; line-height: 1.6; color: var(--cw-muted); }
.cw-text { font-size: 15.5px; line-height: 1.6; color: var(--cw-muted); }
.cw-center { text-align: center; }
.cw-center .elementor-heading-title { text-align: center; }
.cw-center .cw-lead { margin-inline: auto; max-width: 60ch; }
.e-con.cw-center, .e-con.cw-faq-wrap { align-self: center; margin-inline: auto; }

/* Rows of buttons keep their natural width (Elementor stretches flex children). */
.e-con.cw-inline > .e-con { --width: auto; width: auto; }
.e-con.cw-inline > .elementor-element { --container-widget-flex-grow: 0; flex-grow: 0; width: auto; }

/* -------------------------------------------------------------------- hero */
.cw-hero {
	background:
		radial-gradient(60% 80% at 85% 30%, rgba(8, 164, 228, .18), transparent 70%),
		linear-gradient(180deg, var(--cw-ice) 0%, #fff 100%);
	overflow: hidden;
}
.cw-hero__lead { font-size: 18px; line-height: 1.6; color: var(--cw-muted); max-width: 52ch; }
.cw-hero__badges ul {
	list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;
}
.cw-hero__badges li {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
	background: #fff; border: 1px solid var(--cw-line); box-shadow: var(--cw-shadow-sm);
	font-size: 14px; font-weight: 600; color: var(--cw-deep);
}
.cw-hero__badges li::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cw-sky); flex: none;
}
.cw-hero__img img { width: 100%; max-height: 520px; object-fit: contain; display: block; }
@media (max-width: 767px) {
	.cw-hero__img img { max-height: 300px; }
}

/* ------------------------------------------------------------------- promo */
.cw-promo .swiper-slide img,
.cw-promo .elementor-image-carousel img {
	border-radius: 16px; box-shadow: var(--cw-shadow-sm); aspect-ratio: 1; object-fit: cover; width: 100%;
}
.cw-promo .elementor-swiper-button {
	width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--cw-shadow-md);
	color: var(--cw-deep); font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.cw-promo .elementor-swiper-button svg { fill: var(--cw-deep); width: 18px; height: 18px; }
.cw-promo .swiper-pagination-bullet-active { background: var(--cw-blue); }
.cw-note { font-size: 13.5px; color: var(--cw-muted); }

/* -------------------------------------------------------------- categories */
.cw-cat {
	background: var(--cw-ice); border-radius: var(--cw-radius); overflow: hidden;
	transition: box-shadow .2s, transform .2s;
}
.cw-cat:hover { box-shadow: var(--cw-shadow-md); }
.cw-cat__img img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; }
.cw-pill {
	display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 999px;
	background: #fff; font-size: 13px; font-weight: 700; color: var(--cw-blue);
}
.cw-pill p { margin: 0; }
.cw-models { font-size: 14.5px; color: var(--cw-muted); }
.cw-models strong { color: var(--cw-deep); }
.cw-price { font-size: 15px; color: var(--cw-muted); }
.cw-price strong { font-size: 22px; font-weight: 800; color: var(--cw-deep); }

/* ------------------------------------------------------------------ banner */
.cw-banner {
	background: linear-gradient(110deg, var(--cw-deep) 0%, #0A64B0 60%, var(--cw-sky) 100%);
	border-radius: var(--cw-radius); overflow: hidden; position: relative;
}
.cw-banner .cw-lead { color: rgba(255, 255, 255, .86); }
.cw-banner__img img { display: block; width: 100%; max-height: 340px; object-fit: contain; object-position: bottom; }

/* ---------------------------------------------------------------- products */
.cw-product {
	background: #fff; border: 1px solid var(--cw-line); border-radius: 18px;
	transition: box-shadow .2s, border-color .2s;
}
.cw-product:hover { border-color: #BCD6EA; box-shadow: var(--cw-shadow-md); }
.cw-product__img { background: var(--cw-ice); border-radius: 12px; }
.cw-product__img img {
	display: block; width: 100%; height: 200px; object-fit: contain; padding: 16px;
}
.cw-product--featured .cw-product__img img { height: 260px; }
.cw-product__code { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--cw-muted); }
.cw-product__name .elementor-heading-title { font-family: var(--cw-sans); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--cw-deep); }
.cw-product__desc { font-size: 14.5px; line-height: 1.5; color: var(--cw-muted); }
.cw-product__price { font-size: 14px; color: var(--cw-muted); border-top: 1px solid var(--cw-line); padding-top: 12px; }
.cw-product__price strong { font-size: 20px; font-weight: 800; color: var(--cw-deep); }
/* Push the price and button to the card's bottom so a row lines up. */
.cw-product > .cw-product__foot { margin-top: auto; }
@media (max-width: 767px) {
	/* Two cards per row on phones. */
	.cw-product__img img { height: 140px; padding: 10px; }
	.cw-product--featured .cw-product__img img { height: 220px; }
	.cw-product__name .elementor-heading-title { font-size: 17px; }
	.cw-product__desc { font-size: 13.5px; }
	.cw-product__price strong { font-size: 17px; }
	.cw-product .cw-btn--sm { padding: 9px 8px; font-size: 13.5px; white-space: nowrap; }
	.cw-product .cw-btn--sm .cw-icon { display: none; }
}
.cw-group-title .elementor-heading-title {
	font-family: var(--cw-sans); font-weight: 800; font-size: 22px; color: var(--cw-deep);
	display: flex; align-items: center; gap: 12px;
}

/* ------------------------------------------------------------- why Coway */
.cw-why-card { background: #fff; border: 1px solid var(--cw-line); border-radius: 18px; }
.cw-why-card__num .elementor-heading-title {
	display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
	border-radius: 12px; background: var(--cw-ice-2); color: var(--cw-blue); font-size: 17px; font-weight: 800;
}
.cw-why-photo { background: linear-gradient(160deg, #fff 0%, var(--cw-ice-2) 100%); border: 1px solid var(--cw-line); border-radius: var(--cw-radius); overflow: hidden; }
.cw-why-photo img { display: block; width: 100%; max-height: 460px; object-fit: contain; object-position: bottom; }

/* -------------------------------------------------------------- experience */
.cw-exp { border-radius: var(--cw-radius); overflow: hidden; position: relative; min-height: 380px; }
.cw-exp::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(6, 30, 60, .05) 0%, rgba(6, 30, 60, .6) 42%, rgba(6, 30, 60, .94) 100%);
}
.cw-exp > * { position: relative; z-index: 1; }
.cw-exp .cw-h3 .elementor-heading-title { color: #fff; }
.cw-exp .cw-text { color: rgba(255, 255, 255, .88); }

/* ------------------------------------------------------------------- store */
.cw-booth-img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--cw-radius); display: block; }
.cw-store-card { background: var(--cw-ice); border-radius: var(--cw-radius); }
.cw-store { display: grid; gap: 18px; }
.cw-store__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cw-store__rows li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.cw-store__rows .cw-icon { color: var(--cw-blue); margin-top: 2px; }
.cw-store__rows a { font-weight: 600; }
.cw-map { display: block; width: 100%; height: 260px; border: 0; border-radius: 14px; }

/* --------------------------------------------------------------------- FAQ */
.cw-faq { display: grid; gap: 12px; }
.cw-faq__item { background: #fff; border: 1px solid var(--cw-line); border-radius: 14px; transition: border-color .15s, background-color .15s; }
.cw-faq__item[open] { background: var(--cw-ice); border-color: #BCD6EA; }
.cw-faq__q {
	list-style: none; cursor: pointer; padding: 18px 22px; display: flex; gap: 16px; justify-content: space-between; align-items: center;
	font-weight: 700; font-size: 16.5px; line-height: 1.4; color: var(--cw-deep);
}
.cw-faq__q::-webkit-details-marker { display: none; }
.cw-faq__q::after {
	content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cw-ice-2);
	display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; color: var(--cw-blue);
}
.cw-faq__item[open] .cw-faq__q::after { content: "−"; background: #fff; }
.cw-faq__a { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.65; color: var(--cw-muted); }
.cw-faq__a p { margin: 0 0 10px; }
.cw-faq__a p:last-child, .cw-faq__a ul:last-child { margin-bottom: 0; }
.cw-faq__a ul { margin: 0 0 10px; padding-left: 20px; }

/* ---------------------------------------------------------------- CTA band */
.cw-cta-band .cw-container { padding-block: clamp(40px, 6vw, 72px); }
.cw-cta-band__box {
	background: linear-gradient(110deg, var(--cw-deep) 0%, #0A64B0 70%, var(--cw-sky) 130%);
	border-radius: 24px; padding: clamp(32px, 5vw, 56px);
	display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between;
	box-shadow: var(--cw-shadow-md);
}
.cw-cta-band__text { flex: 1 1 420px; }
.cw-cta-band__title { margin: 0 0 10px; font-weight: 800; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; color: #fff; max-width: 24ch; }
.cw-cta-band__lead { margin: 0; color: rgba(255, 255, 255, .85); max-width: 56ch; }
.cw-cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cw-cta-band__num { font-size: 14px; color: rgba(255, 255, 255, .8); padding-left: 6px; }

/* ------------------------------------------------------------------ footer */
.cw-footer { background: #0A2540; color: rgba(255, 255, 255, .8); font-size: 14.5px; line-height: 1.7; }
.cw-footer a { color: #fff; }
.cw-footer a:hover { color: #fff; text-decoration: underline; }
.cw-footer__grid {
	padding-block: 60px 30px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px;
}
.cw-footer__col { display: flex; flex-direction: column; gap: 10px; }
.cw-footer__col p { margin: 0; max-width: 36ch; }
.cw-footer__logo { width: 120px; height: auto; display: block; margin-bottom: 6px; }
.cw-footer__heading { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.cw-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cw-footer__links a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .84); }
.cw-footer__links .cw-icon { color: var(--cw-sky); }
.cw-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .14); padding-block: 22px 28px;
	display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------- floating WhatsApp button */
.cw-wa-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 60;
	width: 60px; height: 60px; border-radius: 50%; background: var(--cw-wa-bright); color: #fff;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
	transition: transform .15s;
}
.cw-wa-float:hover { color: #fff; transform: scale(1.05); }

/* ------------------------------------------------------- block-editor pages */
.cw-page { padding-block: 64px; }
.cw-page__title { font-weight: 800; font-size: clamp(30px, 4vw, 42px); line-height: 1.15; color: var(--cw-deep); margin: 0 0 20px; }
.cw-prose { font-size: 17px; line-height: 1.7; }