/* ================================================
   RED POINT — CATEGORY TABS  (Figma 109:1332)
   ================================================
   The product page's opening 220px category strip.
   chip   min 130 · 12/16 pad · pill · 1px rp_colour border · rgba(37,37,37,.6) · white
   active the viewed product's category — filled solid in its colour
   ================================================ */

.rp-ctabs {
	display: flex;
	align-items: center;
	min-height: 220px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 60px;
	box-sizing: border-box;
}

/* WRAPS, and that is deliberate.
   The Figma strip is one row of EIGHT categories, which fits the 1320 column. The real
   catalogue has eleven, and the longest label ("אביזרי מין ללסביות") is about 180px with its
   padding — eleven of those plus gaps need roughly 2100px. There is no font size or padding
   that fits them on one line and stays legible.
   A single nowrap row was tried and is worse: it either clips both ends (centred) or leaves
   pills cut off past the edge (start-aligned). Wrapping shows every category whole, which
   matters more than matching a row count the content has outgrown.
   The real fix is fewer categories in the strip — a product decision, not a CSS one. */
.rp-ctabs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
}

/* Each chip carries its category colour as --rp-chip (border); the active one fills with it.
   Same treatment as the category hero chips / home hero pills. */
.rp-ctabs .rp-ctabs__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	/* Hold the pill at its content width.
	   Flex items shrink by default, so once the strip became a single nowrap row the pills were
	   squeezed narrower than their labels and the Hebrew ran out past the rounded border. The
	   pill must size to its text and let the STRIP scroll instead — `min-width` alone does not
	   prevent this, because flex-shrink overrides it on the main axis. */
	flex: 0 0 auto;
	padding: 12px 16px;
	border: 1px solid var(--rp-chip, #FF3B3B);
	border-radius: 100px;
	background-color: var(--rp-ctab-bg, rgba(37, 37, 37, 0.6));
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	color: #FFFFFF;
	white-space: nowrap;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

.rp-ctabs .rp-ctabs__chip:not(.rp-ctabs__chip--active):hover {
	background-color: #252525;
}

.rp-ctabs .rp-ctabs__chip--active {
	background-color: var(--rp-chip, #FF3B3B);
}

@media (max-width: 1024px) {
	/* Top padding clears the 132px MOBILE header bar, which is pulled up over this strip by a
	   matching -132px margin. At 24px the first chip sat behind the logo. Tied to the
	   .rp-mheader height, exactly like the home hero and the category hero. */
	.rp-ctabs {
		padding: 132px 24px 24px;
		min-height: 0;
	}

	/* Tablet: smaller pills so three or four fit a row instead of two. */
	.rp-ctabs .rp-ctabs__chip {
		min-width: 0;
		padding: 10px 14px;
		font-size: 15px;
	}

	.rp-ctabs .rp-ctabs__list {
		gap: 12px;
	}
}

/* ------------------------------------------------
   PHONE — one full-width button per row
   ------------------------------------------------
   Same as the hero strip: stacked, one per row, each label given the whole width. */
@media (max-width: 767px) {

	/* The chips themselves are hidden on a phone — the categories live in the mobile header's
	   menu now (redpoint-category-menu.css). The SECTION has to stay, though: it is what clears
	   the 132px mobile bar on the product template, which is pulled up over it by a matching
	   -132px margin. Bottom padding goes to 0 so what remains is exactly that clearance and not
	   an empty 16px band under it. */
	.rp-ctabs {
		padding: 132px 16px 0;
		min-height: 0;
	}
}