/* =========================================================
   LIKE LAB – PRODUCT & SERVICE PAGE
   Like Lab type system (Figma @1920):
   Category tabs  – TT Rounds Neue 400 · 22px · grey / active 600 navy
   Category title – Mona Sans 700 · 32px · navy
   Body           – TT Rounds Neue 400 · 22px · 80% black
   Product chips  – TT Rounds Neue 400 · 17px · red outline
   Product name   – Mona Sans 500 · 34px · black
   Price          – TT Rounds Neue 700 · 26px · red
   Section H2     – Mona Sans 700 · 48px · black
   Side margin 120px
   ========================================================= */
html { overflow-x: clip; }

.llp {
	--red: #E3262F;
	--red-dark: #C41E26;
	--navy: #1E3470;
	--grey: #8A90A3;
	--bar: #E3E9F6;
	--line: #D9DEEA;
	--head: "Mona Sans", system-ui, sans-serif;
	--body: "TT Rounds Neue", "Outfit", system-ui, sans-serif;
	--m: clamp(16px, 6.25vw, 120px);

	position: relative;
	width: 100vw; max-width: 100vw;
	left: 50%; margin-left: -50vw;
	padding: clamp(24px, 2vw, 40px) var(--m) clamp(56px, 5.5vw, 110px);
	background: #fff;
	font-family: var(--body);
	color: #111;
	box-sizing: border-box;
}
.llp *, .llp *::before, .llp *::after { box-sizing: border-box; }
.llp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.llp button { font: inherit; }

/* ---------- Search ---------- */
.llp-search {
	position: relative;
	max-width: 740px;
	margin: 0 auto clamp(24px, 1.8vw, 34px);
	animation: llp-up .7s cubic-bezier(.22,.8,.24,1) both;
}
.llp-search__input {
	width: 100%;
	height: clamp(48px, 3.4vw, 64px);
	padding: 0 56px 0 clamp(18px, 1.4vw, 28px) !important;
	border: 2px solid #C9D2E8 !important;
	border-radius: 0 !important;
	background: #fff !important;
	font-family: var(--body);
	font-size: clamp(15px, 1.05vw, 20px) !important;
	color: #111;
	outline: none;
	box-shadow: none !important;
	transition: border-color .3s ease, box-shadow .3s ease;
	-webkit-appearance: none;
}
.llp-search__input::placeholder { color: #A3A9B9; }
.llp-search__input:focus { border-color: var(--navy) !important; box-shadow: 0 8px 24px rgba(30,52,112,.12) !important; }
.llp-search__icon {
	position: absolute; right: 20px; top: 50%;
	width: 24px; height: 24px; margin-top: -12px;
	color: var(--navy); pointer-events: none;
	transition: transform .3s ease;
}
.llp-search__input:focus ~ .llp-search__icon { transform: scale(1.12); color: var(--red); }

.llp-search__results {
	position: absolute; z-index: 50;
	left: 0; right: 0; top: calc(100% + 6px);
	margin: 0; padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 18px 40px rgba(30,52,112,.16);
	max-height: 360px; overflow-y: auto;
	animation: llp-drop .25s ease both;
}
.llp-search__results li { margin: 0; }
.llp-result {
	display: flex; align-items: center; gap: 14px;
	width: 100%;
	padding: 10px 16px;
	background: none; border: 0; text-align: left; cursor: pointer;
	transition: background-color .2s ease;
}
.llp-result img { width: 44px; height: 44px; object-fit: contain; background: #F4F6FB; flex: none; }
.llp-result__name { display: block; font-size: 16px; color: #111; }
.llp-result__cat { display: block; font-size: 13px; color: var(--grey); }
.llp-result:hover, .llp-result.is-focus { background: #F1F4FB; }
.llp-result:hover .llp-result__name, .llp-result.is-focus .llp-result__name { color: var(--red); }
.llp-search__empty { padding: 14px 18px; color: var(--grey); font-size: 15px; }
@keyframes llp-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Main box ---------- */
.llp-box {
	border: 1px solid var(--line);
	background: #fff;
	animation: llp-up .8s cubic-bezier(.22,.8,.24,1) .1s both;
}

/* Category tab bar */
.llp-tabbar { position: relative; display: flex; align-items: stretch; background: var(--bar); }
.llp-tabbar__scroll {
	flex: 1;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.llp-tabbar__scroll::-webkit-scrollbar { display: none; }
.llp-tabbar__list { position: relative; display: flex; gap: clamp(20px, 2.4vw, 48px); padding: 0 clamp(16px, 1.8vw, 34px); width: max-content; min-width: 100%; }
.llp-tab {
	position: relative;
	padding: clamp(18px, 1.5vw, 28px) 0;
	background: none !important; border: 0 !important; border-radius: 0 !important;
	font-family: var(--body) !important;
	font-weight: 400;
	font-size: clamp(15px, 1.15vw, 22px) !important;
	line-height: 1.2;
	color: var(--grey) !important;
	white-space: nowrap;
	cursor: pointer;
	transition: color .3s ease;
}
.llp-tab:hover { color: var(--navy) !important; }
.llp-tab.is-active { color: var(--navy) !important; font-weight: 600; }
.llp-tab:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
/* sliding red underline */
.llp-tabbar__ink {
	position: absolute; bottom: 0; left: 0;
	height: 4px; width: 0;
	background: var(--red);
	transition: transform .45s cubic-bezier(.65,0,.35,1), width .45s cubic-bezier(.65,0,.35,1);
}
.llp-tabbar__arrow {
	flex: none; width: 40px;
	background: var(--bar) !important; border: 0 !important; color: var(--navy) !important;
	font-size: 28px !important; line-height: 1; cursor: pointer; padding: 0 !important;
	transition: color .2s ease;
}
.llp-tabbar__arrow:hover { color: var(--red) !important; }
.llp-tabbar__arrow--prev { box-shadow: 10px 0 14px -8px rgba(30,52,112,.2); }
.llp-tabbar__arrow--next { box-shadow: -10px 0 14px -8px rgba(30,52,112,.2); }

/* Stage (swaps on category change) */
.llp-stage { position: relative; min-height: 200px; transition: height .4s ease; }
.llp-stage.is-loading::after {
	content: ""; position: absolute; left: 50%; top: 80px;
	width: 34px; height: 34px; margin-left: -17px;
	border: 3px solid #E3E9F6; border-top-color: var(--red); border-radius: 50%;
	animation: llp-spin .7s linear infinite;
}
@keyframes llp-spin { to { transform: rotate(360deg); } }
.llp-stage.is-loading > .llp-cat { opacity: .35; pointer-events: none; transition: opacity .2s ease; }

.llp-cat { animation: llp-fade .55s ease both; }
.llp-cat__head { padding: clamp(22px, 2vw, 40px) clamp(16px, 1.8vw, 40px) clamp(18px, 1.5vw, 30px); }
.llp-cat__title {
	font-family: var(--head) !important;
	font-weight: 700 !important;
	font-size: clamp(20px, 1.67vw, 32px) !important;
	line-height: 1.2 !important;
	color: var(--navy) !important;
	margin: 0 0 clamp(8px, .7vw, 14px) !important;
	animation: llp-up .6s cubic-bezier(.22,.8,.24,1) .05s both;
}
.llp-cat__desc { animation: llp-up .6s cubic-bezier(.22,.8,.24,1) .12s both; }
.llp-cat__desc p, .llp-tabs__panel p, .llp-tabs__panel li {
	font-family: var(--body);
	font-weight: 400;
	font-size: clamp(14px, 1.15vw, 22px);
	line-height: 1.55;
	color: rgba(0,0,0,.75);
	margin: 0 0 1em;
}
.llp-cat__desc p:last-child { margin-bottom: 0; }

/* Product chips */
.llp-chips {
	display: flex; flex-wrap: wrap; gap: clamp(10px, 1.1vw, 20px);
	margin: 0 clamp(10px, .8vw, 16px);
	padding: clamp(18px, 1.5vw, 30px) 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.llp-chip {
	position: relative;
	min-width: clamp(150px, 12vw, 230px);
	padding: clamp(10px, .75vw, 15px) clamp(12px, .8vw, 16px) !important;
	background: #fff !important;
	border: 1.5px solid var(--red) !important;
	border-radius: 0 !important;
	color: var(--red) !important;
	font-family: var(--body) !important;
	font-weight: 400;
	font-size: clamp(13px, .9vw, 17px) !important;
	line-height: 1.2;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color .3s ease, transform .25s ease, box-shadow .3s ease;
	animation: llp-pop .45s cubic-bezier(.34,1.56,.64,1) both;
	animation-delay: calc(var(--i, 0) * 60ms + .15s);
}
.llp-chip::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--red);
	transform: scaleX(0); transform-origin: left;
	transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.llp-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(227,38,47,.18); }
.llp-chip.is-active, .llp-chip:hover { color: #fff !important; }
.llp-chip.is-active::before, .llp-chip:hover::before { transform: scaleX(1); }
.llp-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Product detail */
.llp-detail { position: relative; }
.llp-detail.is-swapping > * { opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.llp-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 50px);
	padding: clamp(18px, 1.5vw, 30px) clamp(14px, .8vw, 16px) clamp(20px, 1.6vw, 30px);
	animation: llp-fade .5s ease both;
}

/* Gallery: main image + vertical thumbs */
.llp-gallery { display: grid; grid-template-columns: minmax(0, 1fr) clamp(70px, 6.2vw, 120px); gap: clamp(12px, 1.4vw, 26px); align-items: start; }
.llp-gallery--single { grid-template-columns: 1fr; }
.llp-gallery__main {
	position: relative;
	aspect-ratio: 427 / 516;
	overflow: hidden;
	border: 2px solid #C9D2E8;
	background: #F4F6FB;
	cursor: zoom-in;
}
.llp-gallery__img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .5s ease, opacity .35s ease;
	transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.llp-gallery__main:hover .llp-gallery__img { transform: scale(1.6); }
.llp-gallery__img.is-fading { opacity: 0; }

.llp-gallery__thumbs { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 18px); }
.llp-thumb {
	display: block; width: 100%;
	aspect-ratio: 1;
	padding: 0 !important;
	background: #F4F6FB !important;
	border: 2px solid transparent !important;
	border-radius: 0 !important;
	overflow: hidden;
	cursor: pointer;
	opacity: .75;
	transition: border-color .3s ease, opacity .3s ease, transform .3s ease;
}
.llp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.llp-thumb:hover { opacity: 1; transform: translateY(-2px); }
.llp-thumb.is-active { border-color: var(--navy) !important; opacity: 1; }

/* Info */
.llp-info { display: flex; flex-direction: column; min-width: 0; animation: llp-up .6s cubic-bezier(.22,.8,.24,1) .1s both; }
.llp-info__name {
	font-family: var(--head) !important;
	font-weight: 500 !important;
	font-size: clamp(20px, 1.75vw, 34px) !important;
	line-height: 1.2 !important;
	color: #111 !important;
	margin: 0 0 clamp(8px, .7vw, 14px) !important;
}
.llp-info__price {
	font-family: var(--body);
	font-weight: 700;
	font-size: clamp(16px, 1.35vw, 26px);
	color: var(--red);
	margin: 0 0 clamp(16px, 1.3vw, 26px);
}
.llp-info__price .woocommerce-Price-amount, .llp-info__price bdi { color: var(--red); font-weight: 700; }
.llp-info__price del { color: var(--grey); font-weight: 400; margin-right: 8px; font-size: .8em; }
.llp-info__price ins { text-decoration: none; }

/* Details / Description tabs */
.llp-tabs { flex: 1; display: flex; flex-direction: column; border: 1px solid #C9D2E8; }
.llp-tabs__nav { display: grid; grid-template-columns: 1fr 1fr; background: var(--bar); }
.llp-tabs__btn {
	position: relative;
	padding: clamp(12px, 1vw, 18px) 10px !important;
	background: #EEF1F9 !important; border: 0 !important; border-radius: 0 !important;
	font-family: var(--body) !important;
	font-size: clamp(14px, .95vw, 18px) !important;
	color: var(--grey) !important;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
}
.llp-tabs__btn::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: var(--red); transform: scaleX(0); transition: transform .35s ease;
}
.llp-tabs__btn:hover { color: var(--navy) !important; }
.llp-tabs__btn.is-active { background: #C9D3EE !important; color: #111 !important; font-weight: 600; }
.llp-tabs__btn.is-active::after { transform: scaleX(1); }
.llp-tabs__panel {
	padding: clamp(18px, 1.5vw, 28px) clamp(16px, 1.2vw, 24px);
	text-align: justify;
	max-height: clamp(300px, 24vw, 460px);
	overflow-y: auto;
}
.llp-tabs__panel.is-active { animation: llp-fade .4s ease both; }
.llp-tabs__panel ul, .llp-tabs__panel ol { padding-left: 1.2em; margin: 0 0 1em; }
.llp-muted { color: var(--grey) !important; }
/* WooCommerce attributes table inside "Product Details" */
.llp-tabs__panel table.shop_attributes, .llp-tabs__panel table.woocommerce-product-attributes {
	width: 100%; border-collapse: collapse; margin: 0; border: 0; text-align: left;
}
.llp-tabs__panel .shop_attributes th, .llp-tabs__panel .shop_attributes td {
	padding: 10px 12px; border: 0; border-bottom: 1px solid #E6EAF3;
	font-size: clamp(14px, 1vw, 19px); vertical-align: top; background: none;
}
.llp-tabs__panel .shop_attributes th { width: 40%; color: var(--navy); font-weight: 600; }
.llp-tabs__panel .shop_attributes td p { margin: 0; font-size: inherit; }
.llp-tabs__panel .shop_attributes tr:nth-child(odd) { background: #F7F9FD; }

/* CTA under the product */
.llp-cta {
	text-align: center;
	padding: clamp(28px, 2.4vw, 46px) 16px clamp(34px, 3vw, 56px);
	border-top: 1px solid var(--line);
}
.llp-cta__title {
	font-family: var(--head) !important;
	font-weight: 500 !important;
	font-size: clamp(20px, 1.75vw, 34px) !important;
	color: #111 !important;
	margin: 0 0 clamp(16px, 1.4vw, 28px) !important;
}
.llp-cta__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 1.4vw, 28px); }
.llp-btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-width: clamp(160px, 11.5vw, 222px);
	padding: clamp(13px, 1vw, 20px) clamp(20px, 1.6vw, 30px);
	font-family: var(--body);
	font-weight: 600;
	font-size: clamp(15px, 1.15vw, 22px);
	line-height: 1;
	text-decoration: none !important;
	border: 2px solid var(--navy);
	overflow: hidden;
	isolation: isolate;
	transition: color .35s ease, border-color .35s ease, transform .25s ease, box-shadow .35s ease;
}
.llp-btn svg { width: 1em; height: 1em; flex: none; }
.llp-btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	transform: scaleX(0); transform-origin: left;
	transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.llp-btn:hover { transform: translateY(-3px); }
.llp-btn:hover::before { transform: scaleX(1); }
.llp-btn--outline { color: var(--navy) !important; background: #fff; }
.llp-btn--outline::before { background: var(--navy); }
.llp-btn--outline:hover { color: #fff !important; box-shadow: 0 10px 24px rgba(30,52,112,.25); }
.llp-btn--solid { color: #fff !important; background: var(--red); border-color: var(--red); }
.llp-btn--solid::before { background: var(--red-dark); }
.llp-btn--solid:hover { border-color: var(--red-dark); box-shadow: 0 10px 24px rgba(227,38,47,.35); }
.llp-btn--solid:hover svg { animation: llp-ring .6s ease; }
@keyframes llp-ring { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } }

.llp-empty { padding: 30px clamp(16px, 1.8vw, 40px); color: var(--grey); }

/* ---------- Explore our products ---------- */
.llp-explore { margin-top: clamp(56px, 5.5vw, 110px); }
.llp-explore__title {
	font-family: var(--head) !important;
	font-weight: 700 !important;
	font-size: clamp(28px, 2.5vw, 48px) !important;
	line-height: 1.2 !important;
	color: #000 !important;
	margin: 0 0 clamp(20px, 1.8vw, 36px) !important;
}
.llp-explore__viewport { overflow: hidden; padding: 12px 12px 28px; margin: -12px -12px 0; }
.llp-explore__track {
	display: flex;
	gap: clamp(16px, 1.25vw, 24px);
	transition: transform .7s cubic-bezier(.22,.8,.24,1);
	touch-action: pan-y;
}
.llp-card {
	position: relative;
	flex: 0 0 calc((100% - clamp(16px, 1.25vw, 24px)) / 2);
	display: block;
	min-height: clamp(220px, 19vw, 370px);
	padding: clamp(22px, 2.1vw, 40px) clamp(20px, 2.1vw, 40px) calc(clamp(36px, 2.6vw, 50px) + clamp(22px, 2.1vw, 40px) * 2);
	background: #fff;
	box-shadow: 0 6px 26px rgba(30,52,112,.08);
	text-decoration: none !important;
	overflow: hidden;
	isolation: isolate;
	transition: transform .45s cubic-bezier(.22,.8,.24,1), box-shadow .45s ease;
}
.llp-card::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px;
	background: var(--red); transform: scaleX(0); transform-origin: left;
	transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.llp-card__body { position: relative; z-index: 2; max-width: 70%; }
.llp-card__title {
	font-family: var(--head) !important;
	font-weight: 700 !important;
	font-size: clamp(20px, 1.67vw, 32px) !important;
	line-height: 1.2 !important;
	color: var(--navy) !important;
	margin: 0 0 clamp(8px, .8vw, 16px) !important;
	transition: color .3s ease;
}
.llp-card__desc {
	font-family: var(--body);
	font-size: clamp(14px, 1.15vw, 22px);
	line-height: 1.45;
	color: rgba(0,0,0,.8);
	margin: 0;
}
.llp-card__list {
	list-style: none;
	margin: clamp(12px, 1vw, 18px) 0 0;
	padding: 0;
}
.llp-card__list li {
	position: relative;
	padding: 3px 0 3px 18px;
	font-family: var(--body);
	font-size: clamp(13px, 1vw, 19px);
	line-height: 1.35;
	color: rgba(0,0,0,.75);
	transition: transform .35s ease, color .3s ease;
	transition-delay: calc(var(--n, 0) * 40ms);
}
.llp-card__list li::before {
	content: ""; position: absolute; left: 0; top: .72em;
	width: 7px; height: 7px; background: var(--red);
}
.llp-card__list li:nth-child(2) { --n: 1; }
.llp-card__list li:nth-child(3) { --n: 2; }
.llp-card__list li:nth-child(4) { --n: 3; }
.llp-card__more { color: var(--grey) !important; }
.llp-card__more::before { background: var(--grey) !important; }
.llp-card:hover .llp-card__list li { transform: translateX(4px); }
.llp-card__img {
	position: absolute; right: clamp(14px, 1.6vw, 32px); bottom: clamp(10px, 1vw, 20px);
	width: 40%; max-height: 66%;
	object-fit: contain; object-position: right bottom;
	transition: transform .6s cubic-bezier(.22,.8,.24,1), filter .6s ease;
}
.llp-card__arrow {
	position: absolute; z-index: 2;
	left: clamp(20px, 2.1vw, 40px); bottom: clamp(22px, 2.1vw, 40px);
	display: flex; align-items: center; justify-content: center;
	width: clamp(36px, 2.6vw, 50px); height: clamp(36px, 2.6vw, 50px);
	background: var(--red); color: #fff;
	overflow: hidden;
	transition: width .45s cubic-bezier(.22,.8,.24,1), background-color .3s ease;
}
.llp-card__arrow span {
	font-family: var(--body); font-weight: 600; font-size: clamp(13px, .95vw, 18px);
	white-space: nowrap; max-width: 0; opacity: 0;
	transition: max-width .45s ease, opacity .3s ease, margin .45s ease;
}
.llp-card__arrow svg { width: 45%; height: 45%; flex: none; transition: transform .35s ease; }
.llp-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(30,52,112,.14); }
.llp-card:hover::after { transform: scaleX(1); }
.llp-card:hover .llp-card__title { color: var(--red) !important; }
.llp-card:hover .llp-card__img { transform: translateY(-8px) scale(1.05); filter: drop-shadow(0 14px 18px rgba(0,0,0,.12)); }
.llp-card:hover .llp-card__arrow { width: clamp(140px, 9.5vw, 180px); background: var(--red-dark); }
.llp-card:hover .llp-card__arrow span { max-width: 130px; opacity: 1; margin-right: 6px; }
.llp-card:hover .llp-card__arrow svg { width: clamp(16px, 1.25vw, 24px); transform: translateX(3px); }

.llp-explore__dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.llp-explore__dot {
	width: 16px; height: 7px; padding: 0 !important; border: 0 !important; border-radius: 10px !important;
	background: var(--navy) !important; cursor: pointer;
	transition: width .45s cubic-bezier(.22,.8,.24,1), background-color .3s ease;
}
.llp-explore__dot.is-active { width: 62px; background: var(--red) !important; }

/* reveal for explore cards */
.llp-explore .llp-card { opacity: 0; transform: translateY(40px); }
.llp-explore.is-in .llp-card { opacity: 1; transform: none; transition: opacity .8s ease var(--d, 0s), transform .9s cubic-bezier(.22,.8,.24,1) var(--d, 0s), box-shadow .45s ease; }
.llp-explore.is-done .llp-card { transition: transform .45s cubic-bezier(.22,.8,.24,1), box-shadow .45s ease; }
.llp-explore.is-done .llp-card:hover { transform: translateY(-6px); }
.llp-explore__title { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.8,.24,1); }
.llp-explore.is-in .llp-explore__title { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes llp-up   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes llp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes llp-pop  { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.llp-product { grid-template-columns: 1fr; }
	.llp-tabs__panel { max-height: none; }
	.llp-card { flex-basis: 100%; }
}
@media (max-width: 600px) {
	.llp-gallery { grid-template-columns: 1fr; }
	.llp-gallery__thumbs { flex-direction: row; overflow-x: auto; }
	.llp-thumb { width: 76px; flex: none; }
	.llp-gallery__main { aspect-ratio: 1; }
	.llp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding-left: 12px; padding-right: 12px; }
	.llp-chips::-webkit-scrollbar { display: none; }
	.llp-chip { flex: none; min-width: 0; }
	.llp-btn { flex: 1 1 100%; }
	.llp-tabs__panel { text-align: left; }
	.llp-card { min-height: 260px; }
	.llp-card__body { max-width: 100%; }
	.llp-card__desc { max-width: 62%; }
}

@media (prefers-reduced-motion: reduce) {
	.llp *, .llp *::before, .llp *::after { animation: none !important; transition: none !important; }
	.llp-explore .llp-card, .llp-explore__title { opacity: 1 !important; transform: none !important; }
	.llp-gallery__main:hover .llp-gallery__img { transform: none; }
}


/* =========================================================
   v1.2 – CATEGORY CARDS ROW + SIDEBAR (IndiaMART-style browsing)
   Card name  – Mona Sans 600 · 20px · navy
   Count      – TT Rounds Neue 400 · 15px · grey
   Sidebar    – Mona Sans 600 · 18px / TT Rounds Neue 14px
   ========================================================= */

/* ---------- Category cards row ---------- */
.llp-cats { margin: 0 0 clamp(24px, 2.2vw, 42px); animation: llp-up .8s cubic-bezier(.22,.8,.24,1) .05s both; }
.llp-cats__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(14px, 1.2vw, 22px); }
.llp-cats__title {
	font-family: var(--head) !important;
	font-weight: 700 !important;
	font-size: clamp(24px, 2vw, 38px) !important;
	line-height: 1.2 !important;
	color: #000 !important;
	margin: 0 !important;
}
.llp-cats__all {
	position: relative;
	padding: 4px 0 !important;
	background: none !important; border: 0 !important; border-radius: 0 !important;
	font-family: var(--body) !important;
	font-weight: 600;
	font-size: clamp(14px, 1vw, 18px) !important;
	color: var(--red) !important;
	cursor: pointer;
}
.llp-cats__all::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: currentColor; transform: scaleX(1); transform-origin: left;
	transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.llp-cats__all:hover::after { transform: scaleX(.3); }

.llp-cats__wrap { position: relative; }
.llp-cats__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(170px, 12.6vw, 240px);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 2px;
	padding: 8px 4px 30px;
	margin: 0 -4px -16px;          /* room for the hover lift + shadow without extra page space */
	scrollbar-width: none;
}
.llp-cats__track::-webkit-scrollbar { display: none; }
.llp-cats.is-grid .llp-cats__track {
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 12.6vw, 240px), 1fr));
	overflow: visible;
}

.llp-catcard {
	position: relative;
	display: flex; flex-direction: column;
	padding: 0 !important;
	text-align: left;
	background: #fff !important;
	border: 1px solid #E1E5EE !important;
	border-radius: 12px !important;
	overflow: hidden;
	cursor: pointer;
	scroll-snap-align: start;
	transition: transform .4s cubic-bezier(.22,.8,.24,1), box-shadow .4s ease, border-color .3s ease;
	animation: llp-pop .5s cubic-bezier(.34,1.4,.64,1) both;
	animation-delay: calc(var(--i, 0) * 55ms + .1s);
}
.llp-catcard__img {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1;
	background: #F4F6FA;
	overflow: hidden;
}
.llp-catcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.22,.8,.24,1); }
.llp-catcard__body {
	display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
	min-height: 92px;
	padding: 14px 16px 14px;
	background: #F4F6FA;
	transition: background-color .3s ease;
}
.llp-catcard__name {
	font-family: var(--head);
	font-weight: 600;
	font-size: clamp(15px, 1.05vw, 20px);
	line-height: 1.25;
	color: #111;
	transition: color .3s ease;
}
.llp-catcard__count { font-family: var(--body); font-size: clamp(13px, .8vw, 15px); color: var(--grey); }
.llp-catcard::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
	background: var(--red); transform: scaleX(0); transform-origin: left;
	transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.llp-catcard:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(30,52,112,.14); border-color: #C9D2E8 !important; }
.llp-catcard:hover .llp-catcard__img img { transform: scale(1.08); }
.llp-catcard:hover .llp-catcard__name { color: var(--red); }
.llp-catcard.is-active { border-color: var(--red) !important; box-shadow: 0 10px 24px rgba(227,38,47,.14); }
.llp-catcard.is-active::after, .llp-catcard:hover::after { transform: scaleX(1); }
.llp-catcard.is-active .llp-catcard__body { background: #FDEEEF; }
.llp-catcard.is-active .llp-catcard__name { color: var(--red); }
.llp-catcard:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.llp-cats__arrow {
	position: absolute; z-index: 3; top: calc(50% - 30px);
	width: 44px; height: 44px; padding: 0 !important;
	display: flex; align-items: center; justify-content: center;
	background: #fff !important; color: var(--navy) !important;
	border: 1px solid #E1E5EE !important; border-radius: 50% !important;
	box-shadow: 0 6px 18px rgba(30,52,112,.18);
	cursor: pointer;
	transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.llp-cats__arrow svg { width: 20px; height: 20px; }
.llp-cats__arrow:hover { background: var(--red) !important; color: #fff !important; transform: scale(1.08); }
.llp-cats__arrow--prev { left: -16px; }
.llp-cats__arrow--next { right: -16px; }
.llp-cats__arrow[hidden] { display: none; }

/* ---------- Box with sidebar ---------- */
.llp-layout { display: block; }
@media (min-width: 992px) {
	.llp-box--side .llp-tabbar { display: none; }                   /* sidebar replaces the tab bar on desktop */
	.llp-box--side .llp-layout { display: grid; grid-template-columns: clamp(250px, 17vw, 330px) minmax(0, 1fr); align-items: start; }
	.llp-box--side .llp-stage { border-left: 1px solid var(--line); }
}

.llp-side {
	position: sticky;
	top: calc(var(--llp-top, 90px) + 12px);
	max-height: calc(100vh - var(--llp-top, 90px) - 24px);
	overflow-y: auto;
	scrollbar-width: thin;
	background: #fff;
	animation: llp-fade .6s ease .15s both;
}
.llp-side__head {
	padding: 16px 18px;
	font-family: var(--head);
	font-weight: 700;
	font-size: clamp(16px, 1.05vw, 20px);
	color: #000;
	background: var(--bar);
	border-bottom: 1px solid var(--line);
}
.llp-side__cats, .llp-side__products { list-style: none; margin: 0; padding: 0; }
.llp-side__item { position: relative; border-bottom: 1px solid #E6EAF2; }
.llp-side__item::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: var(--red); transform: scaleY(0); transform-origin: top;
	transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.llp-side__item.is-active::before { transform: scaleY(1); }
.llp-side__cat {
	display: grid !important;
	grid-template-columns: 1fr 20px;
	grid-template-areas: "name chev" "count chev";
	align-items: center;
	row-gap: 3px;
	width: 100%;
	padding: 14px 16px 14px 18px !important;
	text-align: left;
	background: none !important; border: 0 !important; border-radius: 0 !important;
	cursor: pointer;
	transition: background-color .25s ease;
}
.llp-side__cat:hover { background: #F6F8FC !important; }
.llp-side__name {
	grid-area: name;
	font-family: var(--head);
	font-weight: 600;
	font-size: clamp(15px, 1vw, 18px);
	line-height: 1.25;
	color: #1A1A1A;
	transition: color .25s ease;
}
.llp-side__count { grid-area: count; font-family: var(--body); font-size: clamp(12.5px, .78vw, 14px); color: var(--grey); }
.llp-side__chev { grid-area: chev; width: 18px; height: 18px; color: #8A90A3; transition: transform .35s ease, color .25s ease; }
.llp-side__item.is-open .llp-side__chev { transform: rotate(180deg); color: var(--red); }
.llp-side__item.is-active .llp-side__name { color: var(--navy); }

.llp-side__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,.8,.24,1); }
.llp-side__item.is-open .llp-side__panel { grid-template-rows: 1fr; }
.llp-side__panel > ul { overflow: hidden; }
.llp-side__products { padding: 0 10px 0 18px !important; }
.llp-side__item.is-open .llp-side__products { padding-bottom: 10px !important; }
.llp-side__prod {
	position: relative;
	display: block; width: 100%;
	padding: 8px 8px 8px 16px !important;
	text-align: left;
	background: none !important; border: 0 !important; border-radius: 6px !important;
	font-family: var(--body) !important;
	font-size: clamp(13.5px, .85vw, 15.5px) !important;
	line-height: 1.35;
	color: #4A5068 !important;
	cursor: pointer;
	opacity: 0; transform: translateX(-8px);
	transition: background-color .2s ease, color .2s ease, opacity .35s ease, transform .35s ease;
}
.llp-side__item.is-open .llp-side__prod { opacity: 1; transform: none; }
.llp-side__item.is-open li:nth-child(1) .llp-side__prod { transition-delay: .05s; }
.llp-side__item.is-open li:nth-child(2) .llp-side__prod { transition-delay: .09s; }
.llp-side__item.is-open li:nth-child(3) .llp-side__prod { transition-delay: .13s; }
.llp-side__item.is-open li:nth-child(4) .llp-side__prod { transition-delay: .17s; }
.llp-side__item.is-open li:nth-child(5) .llp-side__prod { transition-delay: .21s; }
.llp-side__prod::before {
	content: ""; position: absolute; left: 4px; top: 50%;
	width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
	background: #B9C0CE; transition: background-color .2s ease, transform .2s ease;
}
.llp-side__prod:hover { background: #F4F6FB !important; color: var(--navy) !important; }
.llp-side__prod.is-active { background: #FDEEEF !important; color: var(--red) !important; font-weight: 600; }
.llp-side__prod.is-active::before, .llp-side__prod:hover::before { background: var(--red); transform: scale(1.3); }

/* tablet & phone: cards row + tab bar stay, sidebar becomes a compact list under them */
@media (max-width: 991px) {
	.llp-box--side .llp-side { display: none; }
	.llp-cats__arrow--prev { left: -6px; }
	.llp-cats__arrow--next { right: -6px; }
}
@media (max-width: 600px) {
	.llp-cats__track { grid-auto-columns: 46%; gap: 10px; }
	.llp-catcard__body { min-height: 80px; padding: 10px 12px; }
	.llp-cats__arrow { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.llp-catcard, .llp-side, .llp-side__prod { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   v1.3 – IndiaMART-style product details
   ========================================================= */
.llp-product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.llp-gallery__main { aspect-ratio: 1; background: #fff; }
.llp-gallery__img { object-fit: contain; padding: clamp(6px, .6vw, 12px); box-sizing: border-box; }

.llp-info__pricebox {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
	padding: 0 0 clamp(14px, 1.1vw, 20px);
	margin: 0 0 clamp(14px, 1.1vw, 20px);
	border-bottom: 1px solid var(--line);
}
.llp-info__pricebox .llp-info__price { margin: 0; }
.llp-info__unit { color: #555; font-weight: 400; font-size: .7em; margin-left: 2px; }
.llp-info__ask { color: var(--navy); }
.llp-info__moq {
	margin: 0; font-family: var(--body); font-size: clamp(13px, .85vw, 16px); color: #555;
}
.llp-info__moq strong { color: #111; font-weight: 600; }

.llp-specs { margin: 0 0 clamp(14px, 1.1vw, 20px); animation: llp-up .6s cubic-bezier(.22,.8,.24,1) .2s both; }
.llp-specs__title, .llp-desc__title {
	font-family: var(--head) !important; font-weight: 700 !important;
	font-size: clamp(16px, 1.05vw, 20px) !important; color: var(--navy) !important;
	margin: 0 0 10px !important; line-height: 1.3 !important;
}
.llp-specs__table {
	width: 100%; border-collapse: collapse; margin: 0 !important;
	font-family: var(--body); font-size: clamp(13px, .85vw, 16px); line-height: 1.45;
	border: 1px solid var(--line) !important;
}
.llp-specs__table th, .llp-specs__table td {
	padding: clamp(8px, .6vw, 11px) clamp(10px, .8vw, 16px) !important;
	border: 0 !important; border-bottom: 1px solid var(--line) !important;
	text-align: left; vertical-align: top; background: transparent;
}
.llp-specs__table tr:last-child th, .llp-specs__table tr:last-child td { border-bottom: 0 !important; }
.llp-specs__table th { width: 44%; color: #6B7186; font-weight: 400; }
.llp-specs__table td { color: #111; font-weight: 500; }
.llp-specs__table tr:nth-child(odd) { background: #F7F9FD; }
.llp-specs__table tr { opacity: 0; animation: llp-fade .45s ease forwards; }
.llp-specs__table tr:nth-child(1) { animation-delay: .15s } .llp-specs__table tr:nth-child(2) { animation-delay: .2s }
.llp-specs__table tr:nth-child(3) { animation-delay: .25s } .llp-specs__table tr:nth-child(4) { animation-delay: .3s }
.llp-specs__table tr:nth-child(5) { animation-delay: .35s } .llp-specs__table tr:nth-child(6) { animation-delay: .4s }
.llp-specs__table tr:nth-child(7) { animation-delay: .45s } .llp-specs__table tr:nth-child(8) { animation-delay: .5s }
.llp-specs__table tr:nth-child(n+9) { animation-delay: .55s }
.llp-specs.is-collapsible:not(.is-open) .llp-specs__more { display: none; }
.llp-specs__toggle {
	margin-top: 10px; padding: 0 !important; background: none !important; border: 0 !important;
	color: var(--red) !important; font-family: var(--body); font-weight: 600; font-size: clamp(13px, .85vw, 16px);
	cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.llp-info__short { font-family: var(--body); font-size: clamp(14px, .95vw, 18px); color: rgba(0,0,0,.8); line-height: 1.6; }
.llp-info__short p { margin: 0 0 .8em; }

.llp-desc {
	margin: 0 clamp(14px, .8vw, 16px) clamp(20px, 1.6vw, 30px);
	padding: clamp(18px, 1.5vw, 28px) clamp(18px, 1.6vw, 30px);
	background: #F7F9FD; border-left: 4px solid var(--red);
	animation: llp-up .6s cubic-bezier(.22,.8,.24,1) .3s both;
}
.llp-desc__body { font-family: var(--body); font-size: clamp(14px, .95vw, 18px); color: rgba(0,0,0,.8); line-height: 1.7; }
.llp-desc__body p { margin: 0 0 .9em; } .llp-desc__body p:last-child { margin-bottom: 0; }
.llp-desc__body ul { padding-left: 1.2em; margin: 0 0 .9em; }

@media (max-width: 991px) {
	.llp-product { grid-template-columns: 1fr; }
	.llp-gallery__main { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
	.llp-gallery__main { aspect-ratio: 1; }
	.llp-specs__table th { width: 46%; }
	.llp-desc { margin-left: 0; margin-right: 0; }
}
.llp-specs.is-open .llp-specs__more { animation-delay: 0s; animation-duration: .3s; }