@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,500..700;1,9..144,500..700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Bloom shop theme
   Layered on top of the compiled Tailwind in built.css. The palette itself
   comes from the theme settings (accent / background / card / text), so this
   file only adds the things settings cannot express: the display serif, the
   panel treatment, the gradient buttons and the page canvas.
   ========================================================================== */

:root {
  --bl-bg: #09070d;
  --bl-surface: #15101c;
  --bl-raised: #1d1626;
  --bl-sunken: #0f0b15;
  --bl-panel: rgba(22, 15, 28, .72);

  --bl-text: #f6f1f7;
  --bl-muted: #a69db0;
  --bl-dim: #8a8296;

  --bl-pink: #ff8fc8;
  --bl-pink-bright: #f9509f;
  --bl-pink-deep: #e02d85;
  --bl-pink-soft: #ffd6ec;
  --bl-yellow: #ffe98a;
  --bl-green: #6fd9ab;
  --bl-red: #ff7a9c;

  --bl-grad: linear-gradient(135deg, #ff6fb8 0%, #f9509f 45%, #e02d85 100%);
  --bl-glow: rgba(224, 45, 133, .32);

  --bl-line: rgba(255, 255, 255, .07);
  --bl-line-strong: rgba(255, 255, 255, .12);

  --bl-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bl-heading: 'Manrope', system-ui, sans-serif;
  --bl-body: 'DM Sans', system-ui, sans-serif;

  --bl-ease: cubic-bezier(.2, .7, .2, 1);
  --bl-spring: cubic-bezier(.34, 1.35, .5, 1);

  --bl-r: 16px;
  --bl-r-sm: 12px;
  --bl-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
}

/* ---------- canvas ---------- */
html body {
  font-family: var(--bl-body);
  color: var(--bl-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(820px circle at -60px -80px, rgba(249, 80, 159, .16), transparent 70%),
    radial-gradient(760px circle at calc(100% + 60px) calc(100% + 80px), rgba(224, 45, 133, .13), transparent 70%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#app {
  max-width: 1200px;
}

::selection {
  background: rgba(249, 80, 159, .35);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--bl-pink-soft);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bl-bg);
}

::-webkit-scrollbar-thumb {
  background: #2a2033;
  border-radius: 999px;
  border: 2px solid var(--bl-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #3a2c46;
}

/* ---------- typography ---------- */
h1, h2, h3 {
  font-family: var(--bl-display);
  font-weight: 600;
  letter-spacing: -.02em;
}

h4, h5, h6,
label,
th,
button {
  font-family: var(--bl-heading);
}

h1.font-bold, h2.font-bold, h3.font-bold,
h1.font-semibold, h2.font-semibold, h3.font-semibold {
  font-family: var(--bl-display);
  font-weight: 600;
}

p, li, span, td, input, select, textarea {
  font-family: inherit;
}

/* Section titles: the stock theme marks these with a left accent bar. Bloom
   uses a small pink rule above the heading instead. */
.component h2.border-l-4 {
  position: relative;
  border-left: 0 !important;
  padding-left: 0 !important;
  padding-top: 18px;
  font-size: 28px;
  line-height: 1.15;
}

.component h2.border-l-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--bl-grad);
}

@media (min-width: 768px) {
  .component h2.border-l-4 {
    font-size: 34px;
  }
}

/* ---------- surfaces ---------- */
.bg-card {
  background: var(--bl-panel) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.border-white\/5 {
  border-color: var(--bl-line) !important;
}

.border-white\/10 {
  border-color: var(--bl-line-strong) !important;
}

.rounded-lg {
  border-radius: var(--bl-r);
}

.rounded-md {
  border-radius: var(--bl-r-sm);
}

.bg-background {
  background-color: var(--bl-surface) !important;
}

/* Panels lift slightly and warm their border on hover, as on the main site. */
header > .bg-card,
.component > div > .bg-card,
.feedback-card,
.status-card {
  transition: border-color .25s var(--bl-ease), transform .25s var(--bl-spring);
}

header > .bg-card:hover,
.feedback-card:hover,
.status-card:hover {
  border-color: rgba(249, 80, 159, .22) !important;
}

/* ---------- brand lockup ---------- */
header h1 {
  font-family: var(--bl-heading) !important;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.05em;
  text-transform: lowercase;
  line-height: 1;
}

header h1::after {
  content: '.';
  color: var(--bl-pink-bright);
  display: inline-block;
  transition: transform .4s var(--bl-spring);
}

header a:hover h1::after {
  transform: translateY(-3px) scale(1.25);
}

header img[alt] {
  border-radius: 12px;
  transition: transform .7s var(--bl-spring);
}

header a:hover img[alt] {
  transform: rotate(72deg) scale(1.06);
}

/* Shop stats read as display numerals. */
header .grid p:first-child {
  font-family: var(--bl-display) !important;
  font-weight: 600;
  letter-spacing: -.02em;
}

header .grid p:last-child {
  font-family: var(--bl-heading) !important;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--bl-dim) !important;
}

/* ---------- navigation ---------- */
nav a,
nav button {
  font-family: var(--bl-heading);
  font-weight: 600;
  transition: color .2s var(--bl-ease), background-color .2s var(--bl-ease), border-color .2s var(--bl-ease), transform .2s var(--bl-spring);
}

nav .bg-card:hover {
  border-color: rgba(249, 80, 159, .35) !important;
  color: var(--bl-text) !important;
}

nav a:active,
nav button:active {
  transform: scale(.97);
}

/* ---------- buttons ---------- */
a.bg-accent-500,
button.bg-accent-500,
input[type="submit"].bg-accent-500 {
  background: var(--bl-grad) !important;
  background-size: 180% 100% !important;
  background-position: 0% 50%;
  border-color: transparent !important;
  color: #fff !important;
  font-family: var(--bl-heading);
  font-weight: 700;
  border-radius: var(--bl-r-sm);
  box-shadow: 0 10px 24px -12px var(--bl-glow), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background-position .45s var(--bl-ease), transform .2s var(--bl-spring), box-shadow .25s var(--bl-ease), filter .2s;
}

a.bg-accent-500:hover,
button.bg-accent-500:hover,
input[type="submit"].bg-accent-500:hover {
  background-position: 100% 50%;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px var(--bl-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
}

a.bg-accent-500:active,
button.bg-accent-500:active {
  transform: translateY(0) scale(.985);
}

button:disabled,
a[disabled],
button[disabled] {
  opacity: .5;
  filter: grayscale(.2);
  transform: none !important;
  box-shadow: none !important;
}

/* Secondary / outline buttons */
a.border-accent-500:not(.bg-accent-500),
button.border-accent-500:not(.bg-accent-500) {
  border-color: rgba(249, 80, 159, .45) !important;
  color: var(--bl-text) !important;
  border-radius: var(--bl-r-sm);
  font-family: var(--bl-heading);
  font-weight: 600;
  transition: background-color .2s var(--bl-ease), border-color .2s var(--bl-ease), transform .2s var(--bl-spring);
}

a.border-accent-500:not(.bg-accent-500):hover,
button.border-accent-500:not(.bg-accent-500):hover {
  background: rgba(249, 80, 159, .1) !important;
  border-color: var(--bl-pink-bright) !important;
  transform: translateY(-1px);
}

/* ---------- form controls ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-family: var(--bl-heading);
  border-radius: var(--bl-r-sm);
  transition: border-color .2s var(--bl-ease), box-shadow .2s var(--bl-ease), background-color .2s var(--bl-ease);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Fields that carry their own frame get the focus ring. Inputs sitting inside a
   styled wrapper (the product search, the quantity stepper) are transparent and
   must not draw a second box inside the first. */
input:focus-visible:not(.bg-transparent),
textarea:focus-visible:not(.bg-transparent),
select:focus-visible {
  border-color: rgba(249, 80, 159, .6) !important;
  box-shadow: 0 0 0 3px rgba(249, 80, 159, .14);
}

.focus-within\:border-accent-500:focus-within {
  border-color: rgba(249, 80, 159, .5) !important;
  box-shadow: 0 0 0 3px rgba(249, 80, 159, .12);
}

input.bg-transparent,
input.bg-transparent:focus,
input.bg-transparent:focus-visible {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

::placeholder {
  color: var(--bl-dim);
  opacity: 1;
}

/* the custom select library used for currency / language / variants */
.choices .choices__inner {
  background: var(--bl-sunken) !important;
  border: 1px solid var(--bl-line) !important;
  border-radius: var(--bl-r-sm) !important;
  font-family: var(--bl-heading);
}

.choices.is-open {
  --tw-ring-color: rgba(249, 80, 159, .5);
}

.choices .choices__list.choices__list--dropdown {
  background: var(--bl-raised) !important;
  border: 1px solid var(--bl-line-strong) !important;
  border-radius: var(--bl-r-sm) !important;
  box-shadow: var(--bl-shadow);
  overflow: hidden;
}

.choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(249, 80, 159, .16) !important;
  color: var(--bl-text) !important;
}

/* ---------- product cards ---------- */
.product-card,
a.bg-card.group {
  border-radius: var(--bl-r);
  overflow: hidden;
  transition: transform .28s var(--bl-spring), border-color .28s var(--bl-ease), box-shadow .28s var(--bl-ease);
}

a.bg-card.group:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 80, 159, .3) !important;
  box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(249, 80, 159, .08);
}

a.bg-card.group img {
  transition: transform .5s var(--bl-ease);
}

a.bg-card.group:hover img {
  transform: scale(1.03);
}

a.bg-card.group h3,
a.bg-card.group .text-lg,
a.bg-card.group .font-semibold {
  font-family: var(--bl-heading) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* prices */
.text-accent-500 {
  color: var(--bl-pink) !important;
}

.text-accent-400 {
  color: var(--bl-pink-soft) !important;
}

/* badges sit as soft pills rather than hard rectangles */
.badges > div,
.product_badges > div {
  border-radius: 999px !important;
  font-family: var(--bl-heading);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 10.5px !important;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .9);
  backdrop-filter: blur(6px);
}

/* stock / meta lines */
.text-t-primary\/50,
.text-t-primary\/60 {
  color: var(--bl-dim) !important;
}

.text-t-primary\/75,
.text-t-primary\/80 {
  color: var(--bl-muted) !important;
}

/* ---------- announcement ---------- */
.announcement .bg-card,
.announcement > div {
  border-radius: 999px;
}

.announcement i,
.announcement svg {
  color: var(--bl-pink);
}

/* ---------- feedback ---------- */
.feedback-card .fa-star,
.fa-star.text-accent-500 {
  color: var(--bl-yellow) !important;
}

/* ---------- faq ---------- */
details summary,
.faq summary {
  font-family: var(--bl-heading);
  font-weight: 700;
  cursor: pointer;
  transition: color .2s var(--bl-ease);
}

details[open] summary,
.faq summary:hover {
  color: var(--bl-pink) !important;
}

/* ---------- tables (customer dashboard, invoices, orders) ---------- */
table {
  font-family: var(--bl-body);
}

thead th {
  font-family: var(--bl-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bl-dim) !important;
}

tbody tr {
  transition: background-color .2s var(--bl-ease);
}

tbody tr:hover {
  background: rgba(255, 255, 255, .02);
}

/* ---------- modals ---------- */
[x-show] .bg-card,
.modal .bg-card {
  border-radius: var(--bl-r);
}

.fixed.inset-0 {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- footer ---------- */
footer {
  font-family: var(--bl-body);
}

footer a {
  transition: color .2s var(--bl-ease);
}

footer a:hover {
  color: var(--bl-pink) !important;
}

footer h1,
footer .font-bold {
  font-family: var(--bl-heading) !important;
  font-weight: 800;
  letter-spacing: -.04em;
  text-transform: lowercase;
}

/* ---------- cart / checkout ---------- */
.cart-item,
.cart-summary {
  border-radius: var(--bl-r);
}

/* payment method tiles */
label img[alt*="pay" i],
label img[alt*="card" i],
label img[alt*="crypto" i] {
  filter: saturate(1.05);
}

/* ---------- misc polish ---------- */
hr {
  border-color: var(--bl-line);
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

a {
  transition: color .2s var(--bl-ease);
}

.splide .splide__arrow {
  background: rgba(249, 80, 159, .12) !important;
  border-radius: 999px;
}

.splide .splide__arrow svg {
  fill: var(--bl-pink) !important;
}

img {
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Refinements
   ========================================================================== */

/* Prices carry the display serif, the way they do on the main site. */
a.bg-card.group p.font-semibold > .text-accent-500,
.product-page .text-accent-500.text-2xl,
.product-page .text-accent-500.text-3xl {
  font-family: var(--bl-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  color: var(--bl-pink) !important;
}

/* Card interior gets a little more room to breathe. */
a.bg-card.group > div > div:last-child {
  padding: 16px 18px 18px;
}

a.bg-card.group p.truncate:first-child {
  font-size: 15px;
  font-weight: 700;
}

/* Slash-through original prices sit back. */
.line-through {
  color: var(--bl-dim) !important;
  text-decoration-color: rgba(255, 255, 255, .35);
}

/* Section rhythm: the stock theme is tight, the main site breathes. */
.component > .py-6 {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 1024px) {
  .component > .lg\:py-8 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Search field: a single sunken pill holding the icon and the input. */
.focus-within\:border-accent-500 {
  background: var(--bl-sunken) !important;
  border-radius: var(--bl-r-sm);
  transition: border-color .2s var(--bl-ease), box-shadow .2s var(--bl-ease);
}

/* Nav: quiet pills, pink when active, matching the site header. */
nav .bg-accent-500\/10 {
  background: rgba(249, 80, 159, .12) !important;
  color: var(--bl-pink) !important;
  border-color: rgba(249, 80, 159, .3) !important;
}

/* Cart badge */
.bg-accent-500.rounded-full {
  background: var(--bl-grad) !important;
  box-shadow: 0 4px 12px -4px var(--bl-glow);
}

/* Quantity steppers, tabs and other small accent surfaces */
.bg-accent-500\/10 {
  background: rgba(249, 80, 159, .1) !important;
}

.ring-accent-500 {
  --tw-ring-color: rgba(249, 80, 159, .45) !important;
}

/* Variant / payment option tiles light up on selection. */
input[type="radio"]:checked + *,
.border-accent-500 {
  border-color: rgba(249, 80, 159, .5) !important;
}

/* Product page gallery */
.splide__slide img,
.aspect-product-page-image {
  border-radius: var(--bl-r);
}

/* Footer wordmark matches the header lockup. */
footer h1::after,
footer .text-2xl.font-bold::after {
  content: '.';
  color: var(--bl-pink-bright);
}

/* Stat blocks inside the customer dashboard */
.text-3xl.font-bold,
.text-2xl.font-bold {
  font-family: var(--bl-display);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* Primary and secondary calls to action carry a bit more weight. */
a.bg-accent-500,
button.bg-accent-500,
a.border-accent-500:not(.bg-accent-500),
button.border-accent-500:not(.bg-accent-500) {
  padding-top: 11px;
  padding-bottom: 11px;
  letter-spacing: -.01em;
}

/* Announcement bar reads as a quiet pill above the header. */
.announcement {
  margin-bottom: 12px;
}

/* Reviews */
.feedback-card {
  border-radius: var(--bl-r);
}

.feedback-card .font-semibold {
  font-family: var(--bl-heading);
}

/* FAQ rows */
.faq details,
details.bg-card {
  border-radius: var(--bl-r);
}

/* Empty-state and placeholder art picks up the accent rather than grey. */
.text-accent-400 svg,
svg.text-accent-400 {
  opacity: .55;
}

/* ==========================================================================
   Drifting petals, same field as the main site
   ========================================================================== */
.petal-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.petal-field i {
  position: absolute;
  top: -40px;
  width: 18px;
  height: 18px;
  border-radius: 64% 0 64% 0;
  background: linear-gradient(140deg, rgba(255, 143, 200, .5), rgba(224, 45, 133, .16));
  opacity: .5;
  animation: petal-drift linear infinite;
}

.petal-field i:nth-child(1) { left: 5%;  animation-duration: 28s; animation-delay: -3s; }
.petal-field i:nth-child(2) { left: 18%; width: 13px; height: 13px; animation-duration: 36s; animation-delay: -15s; }
.petal-field i:nth-child(3) { left: 31%; width: 21px; height: 21px; animation-duration: 31s; animation-delay: -22s; }
.petal-field i:nth-child(4) { left: 46%; width: 11px; height: 11px; animation-duration: 40s; animation-delay: -9s; }
.petal-field i:nth-child(5) { left: 58%; animation-duration: 33s; animation-delay: -27s; }
.petal-field i:nth-child(6) { left: 71%; width: 15px; height: 15px; animation-duration: 29s; animation-delay: -6s; }
.petal-field i:nth-child(7) { left: 84%; width: 23px; height: 23px; animation-duration: 38s; animation-delay: -18s; }
.petal-field i:nth-child(8) { left: 93%; width: 12px; height: 12px; animation-duration: 34s; animation-delay: -31s; }

@keyframes petal-drift {
  0%   { transform: translate3d(0, -8vh, 0) rotate(0); }
  100% { transform: translate3d(70px, 112vh, 0) rotate(420deg); }
}

/* The page content sits above the field. */
#app {
  z-index: 1;
}

/* Fewer petals on small screens. */
@media (max-width: 640px) {
  .petal-field i:nth-child(2),
  .petal-field i:nth-child(4),
  .petal-field i:nth-child(6),
  .petal-field i:nth-child(8) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .petal-field {
    display: none;
  }
}