/* ===========================================================
   Bloom Flower — Shop archive ("Vibrant Petal" magazin mockup)
   =========================================================== */

/* ---------- Responsive artboard toggle ---------- */
/* Only ever force the HIDDEN state — never force a specific visible
   `display` value, since different components need block/flex/grid.
   Letting the component's own rule apply once un-hidden avoids fights
   over CSS source order / specificity (see content-product.php cards,
   .bloom-shop-hero, .bloom-editorial-bento, etc. each using their own
   display type). */
@media (max-width: 767px) {
	.bloom-shop-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
	.bloom-shop-mobile-only { display: none !important; }
}

.bloom-shop { padding-top: 2rem; }
.bloom-shop-section-head { margin-bottom: 3rem; }
.bloom-shop-section-lead { color: var(--color-secondary); margin-top: 0.5rem; }

/* ---------- Desktop hero ---------- */
.bloom-shop-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-gutter);
	align-items: center;
	padding-block: 3rem 4rem;
}
@media (min-width: 768px) {
	.bloom-shop-hero { grid-template-columns: 1fr 1fr; }
}
.bloom-shop-hero__title { margin-block: 1.5rem; line-height: 1; }
.bloom-shop-hero__lead { color: var(--color-secondary); max-width: 28rem; margin-bottom: 2.5rem; }
.bloom-shop-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.bloom-shop-hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	max-height: 600px;
	border-radius: var(--radius-3xl);
	overflow: hidden;
	box-shadow: var(--shadow-ambient-l2);
	transform: rotate(1deg);
}
.bloom-shop-hero__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Editorial bento ---------- */
.bloom-editorial-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-gutter);
}
@media (min-width: 768px) {
	.bloom-editorial-bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); height: 700px; }
	.bloom-editorial-bento__tile--large { grid-column: span 2; grid-row: span 2; }
}
.bloom-editorial-bento__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-xl);
	min-height: 280px;
	background: var(--color-surface-container);
}
.bloom-editorial-bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bloom-editorial-bento__tile:hover .bloom-editorial-bento__img { transform: scale(1.1); }
.bloom-editorial-bento__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); }
.bloom-editorial-bento__scrim--center { background: rgba(0,0,0,0.2); }
.bloom-editorial-bento__scrim--bottom { background: rgba(181,16,106,0); transition: background-color .3s ease; }
.bloom-editorial-bento__tile:hover .bloom-editorial-bento__scrim--bottom { background: rgba(181,16,106,0.2); }
.bloom-editorial-bento__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem; color: #fff; display: flex; flex-direction: column; gap: 0.5rem; }
.bloom-editorial-bento__desc { opacity: 0.85; max-width: 18rem; }
.bloom-editorial-bento__link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.bloom-editorial-bento__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: 1.5rem; color: #fff; }
.bloom-editorial-bento__pill { border: 1px solid #fff; padding: 0.35rem 1rem; border-radius: var(--radius-full); text-transform: uppercase; font-size: var(--text-label-md-size); }
.bloom-editorial-bento__bottom-label { position: absolute; left: 1.5rem; bottom: 1.5rem; color: #fff; font-weight: 700; font-size: var(--text-label-lg-size); }
.bloom-editorial-bento__chip { background: rgba(252,249,248,0.9); color: var(--color-primary); padding: 0.75rem 1.5rem; border-radius: var(--radius-full); font-weight: 600; box-shadow: var(--shadow-ambient-l1); }

/* ---------- Pill filters ---------- */
.bloom-shop-grid-head { text-align: center; margin-bottom: 3rem; }
.bloom-pill-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.bloom-pill {
	padding: 0.4rem 1.25rem;
	border-radius: var(--radius-full);
	font-size: var(--text-label-md-size);
	background: #fff;
	border: 1px solid var(--color-outline-variant);
	color: var(--color-on-surface-variant);
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.bloom-pill:hover { border-color: var(--color-primary); }
.bloom-pill--active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---------- Product grid (desktop) ---------- */
.bloom-shop-grid-section { background: color-mix(in srgb, var(--color-surface-container-low) 50%, transparent); }
.bloom-shop-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-gutter);
	transition: opacity .2s ease;
	min-height: 200px;
}
@media (min-width: 640px) { .bloom-shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bloom-shop-grid { grid-template-columns: repeat(4, 1fr); } }

.bloom-product-card { display: flex; flex-direction: column; height: 100%; }
.bloom-product-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: #fff;
	margin-bottom: 1rem;
}
.bloom-product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bloom-product-card:hover .bloom-product-card__img { transform: scale(1.05); }
.bloom-product-card__ribbon { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.bloom-product-card__wishlist {
	position: absolute; top: 1rem; right: 1rem; z-index: 2;
	width: 40px; height: 40px; border-radius: var(--radius-full);
	background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-primary); box-shadow: var(--shadow-ambient-l1);
	border: none; transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.bloom-product-card__wishlist:hover { background: var(--color-primary); color: #fff; }
.bloom-product-card__wishlist.is-active { background: var(--color-primary); color: #fff; }
.bloom-product-card__wishlist.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

.bloom-product-card__cta {
	position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
	transform: translateY(3rem); opacity: 0;
	transition: transform .3s ease, opacity .3s ease;
}
.bloom-product-card:hover .bloom-product-card__cta { transform: translateY(0); opacity: 1; }
.bloom-product-card__cta .button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; }

.bloom-product-card__info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.25rem 1rem; }
.bloom-product-card__title { margin-bottom: 0.25rem; }
.bloom-product-card__cat { color: var(--color-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.bloom-product-card__price { color: var(--color-primary); font-weight: 700; font-family: var(--font-display); font-size: var(--text-headline-sm-size); white-space: nowrap; margin-left: auto; }
.bloom-product-card__price ins { text-decoration: none; }
.bloom-product-card__price del { opacity: 0.5; font-size: 0.8em; margin-right: 4px; }

.bloom-shop-load-more { display: flex; justify-content: center; margin-top: 4rem; }

/* ---------- Product feed cards (mobile) ---------- */
.bloom-feed-card { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.bloom-feed-card__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface-container); }
.bloom-feed-card__img { width: 100%; height: 100%; object-fit: cover; }
.bloom-feed-card__ribbon { position: absolute; top: 1rem; left: 1rem; }
.bloom-feed-card__wishlist {
	position: absolute; bottom: 1rem; right: 1rem;
	width: 44px; height: 44px; border-radius: var(--radius-full);
	background: rgba(252,249,248,0.9); backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-primary); border: none; box-shadow: var(--shadow-ambient-l1);
}
.bloom-feed-card__wishlist.is-active { background: var(--color-primary); color: #fff; }
.bloom-feed-card__wishlist.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.bloom-feed-card__info { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.bloom-feed-card__cat { color: var(--color-secondary); }
.bloom-feed-card__price { color: var(--color-primary); font-weight: 700; white-space: nowrap; }
.bloom-feed-card__cta { text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }

/* ---------- Category story rail (mobile) ---------- */
.bloom-category-rail {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	padding: 1.25rem var(--space-margin-mobile) 0.5rem;
	scrollbar-width: none;
}
.bloom-category-rail::-webkit-scrollbar { display: none; }
.bloom-category-rail__item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; opacity: 0.7; }
.bloom-category-rail__item--active { opacity: 1; }
.bloom-category-rail__avatar {
	width: 64px; height: 64px; border-radius: 50%;
	padding: 2px; border: 2px solid var(--color-outline-variant);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; background: var(--color-surface-container);
}
.bloom-category-rail__item--active .bloom-category-rail__avatar { border-color: var(--color-primary); }
.bloom-category-rail__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bloom-category-rail__avatar--all { color: var(--color-primary); }
.bloom-category-rail__label { font-size: var(--text-label-md-size); }
.bloom-category-rail__item--active .bloom-category-rail__label { color: var(--color-primary); font-weight: 700; }

/* ---------- Promo banner (mobile) ---------- */
.bloom-promo-banner-wrap { margin-top: 1rem; }
.bloom-promo-banner {
	position: relative;
	height: 200px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background-color: var(--color-primary-container);
	background-size: cover;
	background-position: center;
	box-shadow: var(--shadow-ambient-l1);
}
.bloom-promo-banner__scrim { position: absolute; inset: 0; background: rgba(181,16,106,0.55); mix-blend-mode: multiply; }
.bloom-promo-banner__content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-inline: 1.5rem; color: #fff; }
.bloom-promo-banner__title { font-size: 28px; line-height: 1.15; }
.bloom-promo-banner__subtitle { margin-top: 0.35rem; opacity: 0.9; }

/* ---------- Shop newsletter banner ---------- */
.bloom-shop-newsletter {
	position: relative;
	overflow: hidden;
	background: var(--color-primary-container);
	border-radius: var(--radius-3xl);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 768px) { .bloom-shop-newsletter { flex-direction: row; padding: 4rem; } }
.bloom-shop-newsletter__blob { position: absolute; top: -8rem; right: -8rem; width: 16rem; height: 16rem; border-radius: 50%; background: rgba(255,176,204,0.2); filter: blur(60px); }
.bloom-shop-newsletter__copy { position: relative; z-index: 1; flex: 1; text-align: center; color: #fff; }
@media (min-width: 768px) { .bloom-shop-newsletter__copy { text-align: left; } }
.bloom-shop-newsletter__title { color: #fff; margin-bottom: 1.5rem; }
.bloom-shop-newsletter__lead { color: rgba(255,255,255,0.85); margin-bottom: 2rem; }
.bloom-shop-newsletter__form { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 480px) { .bloom-shop-newsletter__form { flex-direction: row; } }
.bloom-input--on-primary { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.bloom-input--on-primary::placeholder { color: rgba(255,255,255,0.6); }
.bloom-shop-newsletter__media { position: relative; z-index: 1; display: flex; justify-content: center; gap: 1rem; }
.bloom-shop-newsletter__photo { width: 140px; aspect-ratio: 4/5; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-ambient-l2); }
.bloom-shop-newsletter__photo img { width: 100%; height: 100%; object-fit: cover; }
.bloom-shop-newsletter__photo--1 { transform: rotate(-5deg); }
.bloom-shop-newsletter__photo--2 { transform: rotate(10deg) translateY(1.5rem); }