/**
 * Storefront Category Cards — boudoir "Our Selection" grid. Exact spec hex.
 * The card is an <a>, so name/count colours are written 2-class
 * (.scc-card .scc-card__name) to beat the Elementor kit's `a { color }` bleed
 * (0,1,1); the image height is likewise 2-class to beat `.elementor img
 * { height:auto }`.
 */

.scc__head { text-align: center; margin: 0 0 clamp(28px, 4vw, 44px); }
.scc__eyebrow { margin: 0 0 12px; font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #E0102F; }
.scc__title { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 4vw, 44px); font-weight: 600; line-height: 1.1; color: #F5EDE7; }

/* Grid — default auto-fills (bare shortcode); the widget/shortcode set explicit columns. */
.scc-cards { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.scc-card {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 200px; padding: 28px; border-radius: 18px; overflow: hidden; text-decoration: none;
	background: linear-gradient(157deg, #241017 0%, #160C11 72%);
	border: 1px solid rgba(245, 237, 231, .10);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, box-shadow .35s ease;
}
.scc-card:hover { transform: translateY(-4px); border-color: rgba(224, 16, 47, .55); box-shadow: 0 18px 44px rgba(0, 0, 0, .40); }

/* 2-class so it beats `.elementor img { height:auto }`. */
.scc-card .scc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.scc-card:hover .scc-card__img { transform: scale(1.06); }

.scc-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 5, 8, .15) 0%, rgba(11, 5, 8, .55) 55%, rgba(11, 5, 8, .88) 100%); }
/* No image → the flat gradient is already dark; keep the wash light so it doesn't muddy. */
.scc-card--noimg .scc-card__overlay { background: linear-gradient(180deg, rgba(11, 5, 8, 0) 0%, rgba(11, 5, 8, .22) 100%); }

.scc-card__body { position: relative; z-index: 2; }
.scc-card .scc-card__name { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 25px; font-weight: 600; line-height: 1.2; color: #F5EDE7; }
.scc-card .scc-card__count { display: block; margin-top: 7px; font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .01em; color: #A98D96; }

.scc-empty { color: #A98D96; font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; }

/* Bare-shortcode responsiveness (the widget sets its own per-breakpoint columns). */
@media (max-width: 1024px) { .scc-cards:not([style*="grid-template-columns"]) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (max-width: 560px) {
	.scc-card { min-height: 168px; padding: 22px; }
	.scc-card .scc-card__name { font-size: 22px; }
}

/* ============================================================================
   "Shop by / Who it's for" persona cards — ghosted monogram + live count.
   Cards are <a>, so text colours are 2-class to beat the kit `a{}` bleed.
   ========================================================================== */
.scc-personas__grid { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.scc-persona {
	position: relative; display: flex; flex-direction: column; justify-content: space-between;
	min-height: 430px; padding: 40px; border-radius: 22px; overflow: hidden; text-decoration: none;
	background: linear-gradient(180deg, #1A0F15 0%, #0C060B 100%);
	border: 1px solid rgba(245, 237, 231, .08);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, box-shadow .35s ease;
}
.scc-persona:hover { transform: translateY(-4px); border-color: rgba(224, 16, 47, .5); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
.scc-persona.is-active { border-color: rgba(224, 16, 47, .65); box-shadow: 0 0 0 1px rgba(224, 16, 47, .30), 0 22px 54px rgba(224, 16, 47, .10); }

/* Feature image as a TOP vignette that dissolves into the card before it
   reaches the "x products" line. The mask fades the image itself to transparent
   so the card's own background gradient shows through — a real blend, not a flat
   scrim over it. Scoped at (0,2,1) so it beats the kit's `img{height:auto}`.
   Fade %s are card-height relative; nudge them if a card's text block is taller. */
.scc-persona .scc-persona__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0) 58%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0) 58%);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.scc-persona:hover .scc-persona__img { transform: scale(1.05); }
/* Gentle reinforcement of the blend + a dark base under the text. Transparent
   up top so the silk stays bright; settles into the card's near-black at the
   bottom. (Also the graceful fallback if a browser ignores mask-image.) */
.scc-persona__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 5, 8, 0) 38%, rgba(11, 5, 8, .55) 60%, rgba(11, 5, 8, .9) 100%); }
/* Text sits above the image; margin-top:auto keeps it bottom-aligned whether or
   not a monogram is present (the monogram is hidden once an image is set). */
.scc-persona__body { position: relative; z-index: 2; margin-top: auto; }
.scc-persona--has-img .scc-persona__mono { display: none; }

.scc-persona .scc-persona__mono { font-family: 'Playfair Display', Georgia, serif; font-size: 92px; font-weight: 600; line-height: .85; color: rgba(245, 220, 226, .07); }
.scc-persona .scc-persona__count { display: block; margin: 0 0 12px; font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #E0102F; }
.scc-persona .scc-persona__title { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.15; color: #F5EDE7; }
.scc-persona .scc-persona__desc { margin: 12px 0 0; font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: #A98D96; max-width: 34ch; }

@media (max-width: 1024px) { .scc-personas__grid:not([style*="grid-template-columns"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.scc-personas__grid:not([style*="grid-template-columns"]) { grid-template-columns: 1fr; }
	.scc-persona { min-height: 340px; padding: 32px; }
	.scc-persona .scc-persona__mono { font-size: 76px; }
	.scc-persona .scc-persona__title { font-size: 26px; }
}

/* Mobile: horizontal swipe slider instead of a tall vertical stack.
   The Elementor "Columns" control writes an INLINE grid-template-columns
   (mobile = 1), so the slider properties need !important to win. Cards snap;
   the next card peeks (~15%) to signal there's more to swipe. */
@media (max-width: 767px) {
	.scc-personas__grid {
		display: grid !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 85% !important;
		grid-template-columns: none !important;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 12px;
	}
	.scc-personas__grid::-webkit-scrollbar { display: none; }
	.scc-personas__grid > .scc-persona { scroll-snap-align: start; }
}