/**
 * Shop view skin: the few states the Tailwind utilities cannot express on their
 * own (the selected facet option, and the in-flight loading dim). Everything
 * else is utilities, safelisted in includes/compat/winden.php.
 */

/* Selected facet option: filled box / ringed swatch + slightly bolder label. */
.cur-facet-opt {
	transition: opacity 0.15s ease;
}
.cur-facet-opt:hover {
	opacity: 0.8;
}
.cur-facet-opt.is-selected {
	font-weight: 500;
}
.cur-facet-opt.is-selected .cur-facet-box {
	background: var( --color-fg, #0a0a0a );
	border-color: var( --color-fg, #0a0a0a );
	box-shadow: inset 0 0 0 2px #fff;
}
.cur-facet-opt.is-selected .cur-facet-swatch {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var( --color-fg, #0a0a0a );
}

/* All-products shop (/loja/): a compact header. Its title is just "Loja" (no
   description), so trim the vertical padding and the oversized display h1 that
   the category headers use. Done in CSS to avoid uncompiled Winden utilities. */
[data-curel-shop][data-all] .cur-archive-head {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
[data-curel-shop][data-all] .cur-archive-head h1 {
	font-size: clamp( 26px, 3vw, 40px ) !important;
	line-height: 1.1 !important;
}

/* The expandable parent row is a bare <button> that a theme rule renders in 16px
   mono; force the same label type/size as the leaf options (14px sans). The
   font-family override needs !important to beat that theme rule. */
.cur-facet-list .cur-cat-parent,
.cur-facet-list .cur-cat-parent .truncate {
	font-family: inherit !important;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.25rem;
}

/* While a filter/sort request is in flight, dim the grid + facet panels. */
.cur-shop-loading [data-curel-shop-grid],
.cur-shop-loading [data-curel-shop-facets] {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Infinite-scroll placeholder cards (shop.js ghostCards()).
 *
 * They exist to hold the next batch's space from the moment loadMore() fires, so
 * the footer is pushed while still off-screen rather than yanked away under the
 * reader. Their empty .curel-group-photo picks up the shared no-image logo
 * placeholder from sliders.css for free.
 *
 * The bars carry &nbsp;, so each one inherits the exact line box of the real text
 * it stands in for. That is what keeps a ghost the same height as its card: the
 * widths below are cosmetic, the heights are not. */
.cur-card-ghost {
	pointer-events: none;
}
.cur-ghost-bar {
	display: inline-block;
	width: 45%;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.11;
	animation: cur-ghost-pulse 1.6s ease-in-out infinite;
}
.cur-ghost-title {
	width: 7rem;
}
.cur-ghost-price {
	width: 3rem;
}
@keyframes cur-ghost-pulse {
	50% {
		opacity: 0.05;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.cur-ghost-bar {
		animation: none;
	}
}

/* Desktop filter sidebar: stick below the (sticky) toolbar and scroll on its own
   when the filter list is taller than the viewport, with a thin visible scrollbar.
   --cur-shop-top tracks the live toolbar height (JS) so the panel always sits right
   under it, whether or not the active-filter chips row is showing. self-start (on
   the aside) keeps the grid cell from stretching it, which sticky needs. */
@media ( min-width: 1024px ) {
	[data-curel-shop-sidebar] {
		position: sticky;
		top: var( --cur-shop-top, 110px );
		max-height: calc( 100vh - var( --cur-shop-top, 110px ) );
		overflow-y: auto;
		/* overflow-y:auto forces overflow-x:auto, which would clip the selected
		   colour swatch's outset ring on the left edge; pad both sides so it fits. */
		padding-left: 6px;
		padding-right: 8px;
		/* Breathing room so the last facet value is not flush against the bottom
		   when the sidebar scrolls to its end. */
		padding-bottom: 48px;
		scrollbar-width: thin;
		scrollbar-color: var( --color-hair, #e5e5e5 ) transparent;
	}
	[data-curel-shop-sidebar]::-webkit-scrollbar {
		width: 6px;
	}
	[data-curel-shop-sidebar]::-webkit-scrollbar-thumb {
		background: var( --color-hair, #e5e5e5 );
		border-radius: 3px;
	}
	[data-curel-shop-sidebar]::-webkit-scrollbar-track {
		background: transparent;
	}
}

/* Archive H1: Oxygen ships an unlayered h1 rule that overrides the Tailwind size
   utility (Winden emits it in @layer utilities, which loses to author rules), so
   "Chef" renders at ~32px/600 instead of the design's clamp/700. Re-assert it
   (same fix as the spotlight h2). */
.cur-archive h1 {
	font-size: clamp( 40px, 6vw, 84px ) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.025em !important;
	font-weight: 700 !important;
}

/* Product card: centre the (uncropped) image in its frame. cur-card-fit bottom-
   anchors for the featured sliders; the shop grid reads better centred. */
.cur-product-card img {
	object-position: center !important;
}

/* Colour dots under the card title: each links to that colour's variation. */
.cur-card-color {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px rgba( 10, 10, 10, 0.14 );
	flex: none;
	cursor: pointer;
	transition: transform 0.15s ease;
}
.cur-card-color:hover {
	transform: scale( 1.3 );
}

/* Centred loading pill shown while a filter/sort change is fetched (the grid also
   dims via .cur-shop-loading). Fixed so it stays visible whatever the scroll. */
.cur-querying {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	z-index: 60;
	align-items: center;
	gap: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.14 );
	border-radius: 9999px;
	padding: 10px 20px;
}

/* Infinite-scroll pill: same look as the filter pill but with the image-block
   warm background (#F4F2EE) so it reads against the white footer area. The
   wrapper centres it; the position stays in-flow at the foot of the grid. */
.cur-loadmore-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #f4f2ee;
	border-radius: 9999px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.14 );
	padding: 10px 20px;
}

/* "A carregar mais produtos" spinner shown while the infinite scroll fetches. */
.cur-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 9999px;
	border: 2px solid var( --color-hair, #e5e5e5 );
	border-top-color: var( --color-fg, #0a0a0a );
	animation: cur-spin 0.7s linear infinite;
}
@keyframes cur-spin {
	to {
		transform: rotate( 360deg );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.cur-spinner {
		animation: none;
	}
}

/* Accordion facets: hide the native disclosure triangle (the +/x svg is ours). */
.cur-facet > summary {
	list-style: none;
}
.cur-facet > summary::-webkit-details-marker {
	display: none;
}
/* Oxygen/theme ship an unlayered `summary { display: list-item }` (plus a global
   `svg { display: block }`) that beats Winden's layered .flex utility, so the +/x
   icon stacked under the label. Force the row layout from our own stylesheet. */
.cur-facet-summary {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

/* Long facet lists collapse to the first six options, the sixth fading under a
   gradient as a "there is more" cue, with a "Ver mais" button below. Expanding
   flips data-collapsed and the rules fall away. */
.cur-facet-list[ data-collapsed='true' ] > :nth-child( n + 7 ) {
	display: none;
}
.cur-facet-list[ data-collapsed='true' ] > :nth-child( 6 ) {
	-webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 20%, transparent 95% );
	mask-image: linear-gradient( to bottom, #000 0%, #000 20%, transparent 95% );
	pointer-events: none;
}

/* Oxygen ships an unlayered `button { font-family: <mono>; font-size: 16px }` that
   beats Winden's layered text utilities on every <button>, so the filter values,
   sort value, chips and "Ver mais" rendered as JetBrains Mono 16px. Re-assert the
   intended sans/mono sizes (matching staging) from our own unlayered stylesheet. */
.cur-facet-opt {
	font-family: inherit !important; /* sans body font, not mono */
	font-size: 14px !important;
}
.cur-facet-opt [data-curel-facet-count] {
	font-size: 11px !important; /* the count stays mono, just small */
}
[data-curel-sort-trigger],
[data-curel-sort-value] {
	font-family: inherit !important;
	font-size: 13px !important;
}
.cur-chip,
[data-curel-clear-all] {
	font-size: 11px !important; /* mono, matching the "Filtros ativos" label */
	text-transform: uppercase !important; /* the button reset also kills .uppercase */
}
[data-curel-clear-all] {
	padding: 5px 10px;
}
/* The clear-all button has no background: its 10px padding-left pushes the visible
   text that far in, so the flex gap alone left the hairline hugging the chips and
   floating away from the button. Match the padding on the divider's left so the gap
   reads symmetric. margin (not padding): padding would let bg-hair fill it and widen
   the 1px line. */
.cur-chip-sep {
	margin-left: 10px;
}
.cur-facet-more {
	font-size: 10px !important;
	text-transform: uppercase !important;
}