/* Storefront styles, loaded on every page by Layout/HeaderView: design tokens, the .hv1 scope (a reset over the
   global style.css), site header and footer, product cards, badges and the toast. Design: docs/homedesign/home1.html.
   Page styles: assets/css/Home/, assets/css/Product/. */

/* bootstrap-icons.css ships font-display: block; override to swap so icon text isn't hidden while the font loads */
@font-face {
  font-family: "bootstrap-icons";
  src:
    url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/fonts/bootstrap-icons.woff2?e34853135f9e39acf64315236852cd5a")
      format("woff2"),
    url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/fonts/bootstrap-icons.woff?e34853135f9e39acf64315236852cd5a")
      format("woff");
  font-display: swap;
}

:root {
  --brand-primary: #f472b6;
  /* Soft Pink */
  --brand-primary-hover: #db2777;
  /* Darker Pink */
  --brand-secondary: #fdf2f8;
  /* Very Light Pink for backgrounds */
  --brand-accent: #fb923c;
  /* Peach/Orange for highlights */
  --text-dark: #334155;
  --text-muted: #64748b;
}

.hv1 {
  font-family: "Poppins", sans-serif;
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.5;
  background-color: #f8fafc;
  overflow-x: clip;
  /* not hidden: that would break the sticky header */
}

/* assets/css/style.css sets font/color/size/line-height on every element via `*` (and a shadow on
   every button); undo it inside .hv1 at zero specificity so Bootstrap + this mockup's rules win */
:where(.hv1 *) {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

:where(.hv1) button {
  box-shadow: none;
}

/* style.css also zeroes `.row` margins and `.col` padding/margins, which removes Bootstrap's g-* gutters
   (cards touching); restore Bootstrap's gutter rules inside .hv1 */
.hv1 .row {
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.hv1 .row > .col {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.v1-eyebrow {
  letter-spacing: 0.12em;
}

/* footer link group headings: small caps with a short brand-colour rule */
.v1-foot-title {
  position: relative;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.v1-foot-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-primary-hover);
}

/* drive the Bootstrap button through its own variables: a plain bg-* class goes transparent on .btn:hover */
.v1-btn-brand {
  --bs-btn-bg: var(--brand-primary-hover);
  --bs-btn-border-color: var(--brand-primary-hover);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

/* CSS, not JS: style.css's `a { color: inherit !important }` beats inline hover colors */
.hv1 .custom-hover:hover {
  color: var(--brand-primary-hover) !important;
  text-decoration: underline !important;
}

/* style.css `a { color: inherit !important }` would keep the dark text on the dark hover background */
.hv1 a.btn-outline-dark:hover {
  color: #fff !important;
}

/* Running text strip */
.v1-marquee {
  background-color: var(--brand-primary-hover);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1040;
}

/* the text is repeated and the track slides left by exactly one half, so the loop is seamless */
.v1-marquee-track {
  display: inline-flex;
  animation: v1-marquee 50s linear infinite;
}

.v1-marquee:hover .v1-marquee-track {
  animation-play-state: paused;
}

.v1-marquee-item {
  padding: 0 1.5rem;
}

@keyframes v1-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v1-marquee {
    text-align: center;
    white-space: normal;
  }

  .v1-marquee-track {
    animation: none;
  }

  .v1-marquee-item:not(:first-child) {
    display: none;
  }
}

/* Main Navbar */
.v1-header-bar {
  z-index: 1030;
}

.main-header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1030;
  transition: all 0.3s ease;
}

.search-input {
  background-color: #f1f5f9;
  border: none;
  border-radius: 20px 0 0 20px;
  padding-left: 20px;
}

.search-input:focus {
  background-color: white;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.25rem rgba(244, 114, 182, 0.25);
}

.search-btn {
  background-color: #f1f5f9;
  border: none;
  border-radius: 0 20px 20px 0;
  color: var(--brand-primary-hover);
  padding-right: 20px;
}

/* Category Nav */
.category-nav {
  background-color: white;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  white-space: nowrap;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

/* header menu: every item in one centred row; on narrow screens it wraps to a second row instead of scrolling,
   so no category is ever hidden (the shared .category-nav scrolls, which the Shop-by-Category circles still use) */
.category-nav.v1-menu {
  overflow: visible;
  white-space: normal;
}

/* items spaced apart by the gap; the link padding stays small so the active underline hugs the label */
.v1-menu .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 60px;
}

.v1-menu .category-link {
  padding: 12px 4px;
}

.category-link {
  color: var(--text-dark);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 15px;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s;
}

.category-link:hover,
.category-link.active {
  color: var(--brand-primary-hover) !important;
  border-bottom: 2px solid var(--brand-primary-hover);
}

/* header dropdowns (Home, Shop Now): a soft borderless card with rounded, pink-tinted items instead of Bootstrap's
   grey hover and blue pressed / active state */
.v1-menu .dropdown-menu {
  --bs-dropdown-spacer: 6px;
  --bs-dropdown-min-width: 190px;
  --bs-dropdown-padding-x: 8px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-font-size: 0.9rem;
  --bs-dropdown-color: var(--text-dark);
  --bs-dropdown-item-padding-x: 14px;
  --bs-dropdown-item-padding-y: 8px;
  --bs-dropdown-item-border-radius: 8px;
  --bs-dropdown-link-hover-bg: var(--brand-secondary);
  --bs-dropdown-link-active-bg: var(--brand-secondary);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
}

.v1-menu .dropdown-item {
  font-weight: 500;
  transition:
    background-color 0.15s,
    color 0.15s;
}

/* style.css forces a { color: inherit !important }, so the brand colour needs !important too */
.v1-menu .dropdown-item:hover,
.v1-menu .dropdown-item:focus,
.v1-menu .dropdown-item:active,
.v1-menu .dropdown-item.active {
  color: var(--brand-primary-hover) !important;
}

/* the page you're on */
.v1-menu .dropdown-item.active {
  font-weight: 600;
}

/* sub-items in the mobile menu groups: indented, flush like the top-level rows */
.hv1 #v1-mobile-menu .collapse .list-group-item {
  padding-left: 2rem;
  border-width: 0 0 1px;
  border-radius: 0;
}

/* Product Cards (Home + Product list) */
.v1-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.v1-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: var(--brand-primary);
}

.product-img-wrap {
  position: relative;
  padding-top: 100%;
  /* 1:1 Aspect Ratio */
  background-color: #f8fafc;
  overflow: hidden;
}

.product-img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 15px;
  transition: transform 0.5s ease;
}

.v1-card:hover .product-img-wrap img {
  transform: scale(1.08);
}

/* Product card badges (v1CardBadges in Layout/js/Storefront-JS): one row across the card top, discount + Best Seller stacked on the
   left, New Arrival pushed right; on a card too narrow for both, New Arrival wraps under the stack instead of
   overlapping it. The row lets clicks through to the product image underneath. */
.v1-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}

.v1-badge-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.v1-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
}

.v1-badge-sale {
  background-color: #ef4444;
}

.v1-badge-best {
  background-color: #fb923c;
}

.v1-badge-new {
  margin-left: auto;
  background-color: var(--brand-primary);
}

/* Card "Buy Now" button (Home and product list cards): solid raspberry fill, bold white text + cart icon */
.btn-add-cart {
  --buy-bg: #c93b76;
  --buy-bg-hover: #b0305f;
  background-color: var(--buy-bg);
  color: #fff !important;
  /* !important: also used on <a> (variant products) */
  border: 1px solid var(--buy-bg);
  border-radius: 8px;
  padding: 8px;
  font-weight: 700;
  transition:
    background-color 0.2s,
    border-color 0.2s;
  width: 100%;
  margin-top: auto;
}

.btn-add-cart:hover,
.btn-add-cart:focus-visible,
.btn-add-cart:active {
  background-color: var(--buy-bg-hover);
  border-color: var(--buy-bg-hover);
  color: #fff !important;
}

/* Card meta: rating + sold count row and the thin sold bar under it (design: beautymarketplace_plp.html) */
.v1-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.v1-meter {
  height: 6px;
  margin-bottom: 16px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  /* Swiper slides (Home's Flash Sale cards) are text-align: -webkit-center, which centres a narrower block child */
  text-align: start;
}

.v1-meter-fill {
  height: 100%;
  background: #ef4444;
  border-radius: 3px;
}

/* Qiscus chat widget (loaded by FooterView): keep the "Talk to Us!" launcher, hide its welcome popup
   ("Customer Service MSGLOW: Halo! Apakah ada yang ingin anda tanyakan ?"), which sat over the content. The popup is
   its own iframe, separate from the launcher and from the chat window; !important beats the inline display the widget
   script sets on it, so it stays hidden. Applies on every page (this header is site-wide). */
#qcw-welcome-iframe {
  display: none !important;
}

/* Toast Notification */
.custom-toast {
  position: fixed;
  bottom: -100px;
  /* bottom centre: bottom right is covered by the site's chat button */
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: white;
  border-left: 4px solid var(--brand-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 15px 20px;
  border-radius: 8px;
  z-index: 9999;
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 15px;
}

.custom-toast.show {
  bottom: 20px;
}

/* Helpers */
/* !important: beats style.css `a { color: inherit !important }` */
.text-brand {
  color: var(--brand-primary-hover) !important;
}

.bg-brand {
  background-color: var(--brand-primary);
}

.bg-brand-light {
  background-color: var(--brand-secondary);
}

.menu-sale {
  color: #fb6f92 !important;
  font-weight: 700 !important;
}

/* Header icon captions (Account / Wishlist / Cart), cart count, logo */
.v1-logo {
  height: 30px;
}

.v1-icon-label {
  font-size: 0.7rem;
}

.v1-cart-count {
  font-size: 0.6rem;
}

/* Footer social icons: grey disc, brand pink on hover (Bootstrap's bg-light / text-dark are !important) */
.v1-social {
  width: 35px;
  height: 35px;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.v1-social:hover {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

.v1-toast-icon {
  width: 24px;
  height: 24px;
}

/* Loading placeholder for a slider card, replaced once the JS renders the products */
.v1-skeleton-card {
  height: 400px;
  border-radius: 12px;
}