/**
 * Celine Claire Search
 * Reads as an extension of Shop: warm ground, near-black type, brand yellow reserved
 * for the primary action and the active filter, thin rules instead of card shadows.
 */

.ccs {
	--s-ink: #1B1A17;
	--s-ink-2: #4A3F38;
	--s-canvas: #FBF7EF;
	--s-panel: #FFFFFF;
	--s-line: rgba(27, 26, 23, 0.10);
	--s-line-soft: rgba(27, 26, 23, 0.06);
	--s-yellow: #F5C518;
	--s-oos: #8B4A3A;
	--s-r: 2px;
	--s1: 6px;
	--s2: 12px;
	--s3: 20px;
	--s4: 32px;
	--s5: 52px;

	box-sizing: border-box;
	width: min(1180px, 92vw);
	margin-inline: auto;
	padding-block: var(--s5) calc(var(--s5) * 1.4);
	color: var(--s-ink);
	display: flex;
	flex-direction: column;
	gap: var(--s5);
}
.ccs *, .ccs *::before, .ccs *::after { box-sizing: border-box; }
.ccs h1, .ccs h2, .ccs h3 { margin: 0; color: var(--s-ink); text-wrap: balance; }
.ccs p { margin: 0; color: var(--s-ink-2); }

/* -------------------------------------------------------------------- head */

.ccs__head { display: flex; flex-direction: column; gap: var(--s3); max-width: 62ch; }
.ccs__h1 { font-size: clamp(26px, 3.8vw, 42px); line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ccs__lede { font-size: 15px; line-height: 1.65; }
.ccs__count { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-ink); }
.ccs__notice {
	font-size: 14px;
	padding: var(--s2) var(--s3);
	border-left: 3px solid var(--s-yellow);
	background: var(--s-canvas);
}

/* -------------------------------------------------------------------- form */

.ccs__form { display: flex; flex-direction: column; gap: var(--s1); }
.ccs__formlabel { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-ink-2); }
.ccs__formrow { display: flex; gap: var(--s2); align-items: stretch; }
.ccs__formrow input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 var(--s3);
	border: 1px solid var(--s-line);
	border-radius: var(--s-r);
	background: var(--s-panel);
	color: var(--s-ink);
	font: inherit;
	font-size: 16px; /* keeps iOS from zooming the page on focus */
}

/* The theme styles bare `button` hard enough to beat a single class, so the
   component's own controls are scoped to it. */
.ccs .ccs__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--s3) !important;
	border: 1px solid transparent !important;
	border-radius: var(--s-r) !important;
	font: inherit;
	font-size: 14px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	width: auto;
	transition: background-color 170ms ease-out, color 170ms ease-out, border-color 170ms ease-out;
}
.ccs .ccs__btn--primary {
	background: var(--s-yellow) !important;
	color: var(--s-ink) !important;
	border-color: var(--s-yellow) !important;
	font-weight: 600 !important;
}
.ccs .ccs__btn--primary:hover { background: #E7B70C !important; border-color: #E7B70C !important; }
.ccs .ccs__btn[disabled], .ccs .ccs__btn.is-busy { opacity: 0.45; cursor: default; }

.ccs .ccs__link {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	font: inherit;
	font-size: 13px !important;
	color: var(--s-ink) !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ccs .ccs__link--cta { margin-top: auto; padding-top: var(--s2) !important; align-self: start; min-height: 44px; display: inline-flex; align-items: end; }

.ccs :focus-visible {
	outline: 2px solid var(--s-ink) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba(245, 197, 24, 0.55) !important;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ quick */

.ccs__quick { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; }
.ccs__quicklabel { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--s-ink-2); margin-right: var(--s1); }
.ccs__quick a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--s-line);
	border-radius: 999px;
	font-size: 13px;
	color: var(--s-ink);
	text-decoration: none;
	transition: border-color 170ms ease-out;
}
.ccs__quick a:hover { border-color: var(--s-ink); }

/* ---------------------------------------------------------------- filters */

.ccs__filters {
	display: flex;
	gap: var(--s2);
	overflow-x: auto;
	padding-bottom: var(--s2);
	border-bottom: 1px solid var(--s-line);
	scrollbar-width: thin;
}
.ccs .ccs__filter {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 16px !important;
	border: 1px solid var(--s-line) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--s-ink) !important;
	font: inherit;
	font-size: 13px !important;
	text-transform: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 170ms ease-out, background-color 170ms ease-out;
}
/* The active filter is marked by weight and a border as well as colour, so it does
   not depend on colour alone. */
.ccs .ccs__filter.is-active {
	border-color: var(--s-ink) !important;
	background: var(--s-yellow) !important;
	font-weight: 600 !important;
}
.ccs__filtern {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--s-line-soft);
}
.ccs .ccs__filter.is-active .ccs__filtern { background: rgba(27, 26, 23, 0.14); }

/* --------------------------------------------------------------- sections */

.ccs__section { display: flex; flex-direction: column; gap: var(--s3); }
.ccs__h2 { font-size: clamp(18px, 2.2vw, 24px); font-weight: 400; padding-bottom: var(--s1); border-bottom: 1px solid var(--s-line); }
.ccs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s4) var(--s3); }
.ccs__grid--routines, .ccs__grid--goals, .ccs__grid--learn, .ccs__grid--help {
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* ------------------------------------------------------------------ cards */

.ccs-card { display: flex; flex-direction: column; gap: var(--s1); }
.ccs-card--product { padding-bottom: var(--s3); border-bottom: 1px solid var(--s-line); }
.ccs-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--s-canvas);
	border-radius: var(--s-r);
	overflow: hidden;
	margin-bottom: var(--s2);
}
.ccs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccs-card__body { display: flex; flex-direction: column; gap: var(--s1); }
.ccs-card__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-ink-2); }
.ccs-card__sale { color: var(--s-oos); }
.ccs-card__title { font-size: 16px; line-height: 1.3; font-weight: 500; }
.ccs-card__title a { color: inherit; text-decoration: none; }
.ccs-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ccs-card__desc { font-size: 13px; line-height: 1.55; }
.ccs-card__price { font-size: 15px; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.ccs-card__price del { opacity: 0.5; margin-right: 6px; }
.ccs-card__stock { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ccs-card__stock[data-stock="out"] { color: var(--s-oos); }
.ccs-card__rating { font-size: 12px; }
.ccs-card__meta { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-ink-2); }
.ccs-card__actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s1); }

.ccs-card--page {
	padding: var(--s3);
	border: 1px solid var(--s-line);
	border-radius: var(--s-r);
	background: var(--s-panel);
	gap: var(--s2);
}

/* ------------------------------------------------------- no-result recovery */

.ccs__paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--s-line); border: 1px solid var(--s-line); }
.ccs__path {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	background: var(--s-panel);
	padding: var(--s3);
	text-decoration: none;
	color: var(--s-ink);
	min-height: 44px;
	transition: background-color 170ms ease-out;
}
.ccs__path:hover { background: var(--s-canvas); }
.ccs__pathname { font-size: 15px; font-weight: 500; }
.ccs__pathdesc { font-size: 13px; color: var(--s-ink-2); line-height: 1.5; }

.ccs__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------- header suggestion panel */

.cc-search-sugg {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	max-height: min(58vh, 420px);
	overflow-y: auto;
	border: 1px solid rgba(27, 26, 23, 0.12);
	border-radius: 3px;
	background: #fff;
}
.ccs-sugg__item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	min-height: 56px;
	cursor: pointer;
	border-bottom: 1px solid rgba(27, 26, 23, 0.07);
}
.ccs-sugg__item:last-of-type { border-bottom: 0; }
.ccs-sugg__item.is-active, .ccs-sugg__item:hover { background: #FBF7EF; }
.ccs-sugg__item img, .ccs-sugg__noimg {
	width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover;
	border-radius: 2px; background: #F1ECE2; display: block;
}
.ccs-sugg__badge {
	flex: 0 0 auto;
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 8px;
	border: 1px solid rgba(27, 26, 23, 0.16);
	border-radius: 999px;
	color: #4A3F38;
}
.ccs-sugg__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ccs-sugg__name { font-size: 13.5px; color: #1B1A17; }
.ccs-sugg__desc { font-size: 11.5px; color: #6E6357; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccs-sugg__meta { font-size: 11px; color: #4A3F38; font-variant-numeric: tabular-nums; }
.ccs-sugg__all {
	padding: 12px;
	min-height: 48px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #1B1A17;
	background: #FBF7EF;
	border-top: 1px solid rgba(27, 26, 23, 0.12);
}
.ccs-sugg__all.is-active, .ccs-sugg__all:hover { background: #F5C518; }
.ccs-sugg__none { padding: 14px 12px; font-size: 13px; color: #6E6357; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
	.ccs { gap: var(--s4); padding-block: var(--s4) var(--s5); }
}
@media (max-width: 640px) {
	.ccs__grid { grid-template-columns: 1fr; gap: var(--s4); }
	.ccs__grid--routines, .ccs__grid--goals, .ccs__grid--learn, .ccs__grid--help { grid-template-columns: 1fr; }
	.ccs__paths { grid-template-columns: 1fr; }
	.ccs__formrow { flex-direction: column; }
	.ccs .ccs__btn { width: 100%; }
	/* A scrolling filter row needs a visible hint that it continues off-screen. */
	.ccs__filters { -webkit-overflow-scrolling: touch; mask-image: linear-gradient(to right, #000 88%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.ccs *, .ccs-sugg__item, .ccs__path { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}