/*
 * Rose theme - custom styles.
 * Colors come from the dashboard (Theme Color, backgrounds, border) via the
 * --cl-* variables set in layouts/master.njk. Edit this file for extra tweaks.
 */

:root {
  --mono-accent: var(--cl-accent);   /* used by product cards, navbar, product page */
  --accent-soft: #ff8fb8;            /* lighter rose for highlights */
  --rose-radius: 18px;
}

/* --- Page ------------------------------------------------------------- */
html, body { overflow-x: clip; }      /* stops sideways scroll without breaking sticky header */

body {
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(var(--cl-accent-rgb), .16), transparent 62%),
    radial-gradient(700px 480px at -8% 42%, rgba(var(--cl-accent-rgb), .08), transparent 60%);
  background-attachment: fixed;
  letter-spacing: -.005em;
}

::selection { background: rgba(var(--cl-accent-rgb), .45); color: #fff; }

a { text-underline-offset: 3px; }

/* --- Headings --------------------------------------------------------- */
.section-title h1,
.section-title h2 {
  font-weight: 700;
  letter-spacing: -.035em;
}
.section-subtitle p { color: rgba(255,255,255,.66); }

/* --- Buttons & forms -------------------------------------------------- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }

.form-control,
.form-select {
  border-radius: 14px;
  border-color: rgba(var(--cl-accent-rgb), .22);
}

.modal-content,
.dropdown-menu {
  border-radius: 22px;
  border-color: rgba(var(--cl-accent-rgb), .25);
}

/* --- Navbar ----------------------------------------------------------- */
.hb-navbar[data-component-id="navbar"] .nav-link,
.hb-navbar[data-component-id="navbar"] .nav-ghost {
  border-radius: 999px !important;
}
.hb-navbar[data-component-id="navbar"] .navbar-brand { letter-spacing: -.03em; }

/* --- Product cards ---------------------------------------------------- */
.shop-card.card {
  border-radius: 22px !important;
  background: rgba(var(--cl-background-secondary-rgb), .9) !important;
  border-color: rgba(var(--cl-accent-rgb), .2) !important;
}
.shop-card.card:hover { border-color: rgba(var(--cl-accent-rgb), .7) !important; }
.shop-card .card-title { letter-spacing: -.02em; font-weight: 600; }

/* --- Social buttons on the homepage ----------------------------------- */
.socials .social { border-radius: 18px; }

/* --- Scrollbar -------------------------------------------------------- */
* { scrollbar-color: rgba(var(--cl-accent-rgb), .5) transparent; }

/* --- Mobile (kept from the base theme: currency / login buttons) ------- */
@media (max-width: 991.98px) {
  .hb-navbar[data-component-id="navbar"] .nav-mobile-utility {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--cl-accent-rgb), .3);
    background: #26101c;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
  }
  .hb-navbar[data-component-id="navbar"] .nav-mobile-login { font-size: 14px; }
  .hb-navbar[data-component-id="navbar"] .nav-mobile-currency { min-width: 84px; }
  .hb-navbar[data-component-id="navbar"] .nav-mobile-currency .choices,
  .hb-navbar[data-component-id="navbar"] .nav-mobile-currency .choices__inner {
    margin-bottom: 0 !important;
    min-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}