/* MDIX Toko Online Sentosa — per-template fixes from the audit. */

/* AOS scroll animations left whole sections (categories, products, flash sale) blank
   until each one was scrolled into view, and blank in full-page captures. Show them. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* "Brand of Products" grid only held grey size-label placeholders ("129X33"). */
section.product.brand,
.brand-section {
  display: none !important;
}

/* The footer background image had been replaced by an unrelated salon photo,
   leaving the grey footer links unreadable. Use a plain dark background. */
.footer {
  background: #1f1a24 !important;
}

/* Promo cards now carry real photos; a soft white wash on the text side keeps the
   dark headline readable. */
.style-section .product-wrapper {
  position: relative;
  isolation: isolate;
}
.style-section .product-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
}
.style-section .product-wrapper .wrapper-info {
  position: relative;
  z-index: 1;
}

/* ===== Design QA 2026-10-12 ===== */

/* Category tiles: product photos as uniform round thumbnails (the old icons were tiny, mixed sizes). */
.product-category .wrapper-img img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
}

/* Countdown digits were red / sky-blue / green (sky-blue and green fail contrast). */
.countdown-items .number {
  color: #8a1279 !important;
}

/* Struck-through prices #797979-ish failed AA (4.35:1); header labels 4.10:1. */
.price-cut {
  color: #636363 !important;
}
.cart-text {
  color: #55545f !important;
}

/* Second promo row: the left card puts its text on the right, so the wash must come from the right. */
.weekly-sale .style-section .wrapper-one::before {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 85%);
}
@media (max-width: 767px) {
  .style-section .product-wrapper::before,
  .weekly-sale .style-section .wrapper-one::before {
    background: rgba(255, 255, 255, 0.72);
  }
}

/* Seller cards: store photo behind dark text -> light wash; inline SVG logos sized like the old images. */
.seller-wrapper {
  position: relative;
  isolation: isolate;
}
.seller-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0.55) 100%);
}
.seller-wrapper .seller-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9edf7;
}
.seller-wrapper .seller-img svg {
  width: 62%;
  height: auto;
  max-height: 70%;
}

/* Hero slider dots: 7px tall bars were 30x7 touch targets. Keep the look, enlarge the hit area. */
.swiper-pagination-bullet {
  height: 24px !important;
  padding: 8.5px 0;
  background-clip: content-box;
  border-radius: 30px;
}

/* Phone menu button 31x25 -> 44x44. */
.mobile-menu .mobile-menu-header > button.btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Footer copyright row (the theme had none). */
.footer .mdix-copyright {
  margin: 0;
  padding: 2rem 0 2.4rem;
  font-size: 1.4rem;
  color: #d9d6de;
  text-align: center;
}

/* Cart subtotal line. */
.mdix-cart-total {
  width: 100%;
  margin: 0 0 1.6rem;
  font-size: 1.8rem;
  color: #1d1d1d;
  text-align: right;
}

/* About page: static promo instead of the seller's English promo video. */
.about-promotion.mdix-promo .mdix-promo-inner {
  position: relative;
  z-index: 20;
  max-width: 64rem;
  padding: 0 1.6rem;
  text-align: center;
  color: #ffffff;
}
.about-promotion.mdix-promo h2 {
  font-size: clamp(2.8rem, 2rem + 2vw, 4.4rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.2rem;
}
.about-promotion.mdix-promo p {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 2.4rem;
}
.about-promotion.mdix-promo::before {
  opacity: 0.72;
  background: #6d0f60;
}
.about-promotion.mdix-promo .shop-btn {
  background: #ffffff;
  color: #8a1279;
}

/* Empty cart / wishlist / 404: simple icons instead of unrelated stock photos. */
.mdix-empty-icon {
  width: 16rem;
  height: 16rem;
}
.mdix-404 {
  text-align: center;
}
.mdix-404 .mdix-404-code {
  font-size: clamp(8rem, 6rem + 6vw, 14rem);
  font-weight: 700;
  line-height: 1;
  color: #8a1279;
  margin-bottom: 1.6rem;
}
.mdix-404 .mdix-404-text {
  font-size: 2rem;
  color: #1d1d1d;
  margin-bottom: 2.4rem;
}
.mdix-text-link {
  color: #8a1279;
  text-decoration: underline;
}

/* Hero: dark headline sat on dark parts of the photos (shop rails, woman at the rack). Light wash on the text side. */
.hero-wrapper .swiper-slide {
  position: relative;
  isolation: isolate;
}
.hero-wrapper .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
@media (max-width: 991px) {
  .hero-wrapper .swiper-slide::before {
    background: rgba(255, 255, 255, 0.7);
  }
}

/* Listing sidebar promo: headline sat on the model's face. Wash the top, keep the photo below. */
.sidebar-shop-section {
  position: relative;
  isolation: isolate;
  background-position: center bottom !important;
  background-size: cover !important;
}
.sidebar-shop-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(255, 255, 255, 0.15) 100%);
}

/* Blog sidebar newsletter: white text on a pink fabric photo was unreadable. */
.blog-post-section .newsletter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.blog-post-section .newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(70, 12, 60, 0.78);
}

/* AA contrast (D-20): theme grey #797979 (4.1–4.35:1) -> #5f5f5f; pure red #ff0000 (4.0:1) -> #c8102e. Selectors taken from css/style.css. */
.blog-post-section .blog-post .category-list a,
.blogs-wrapper .wrapper-info .wrapper-data .wrapper-item .text,
.checkbox-item p,
.header-center .header-cart-items .cart-item .cart-text,
.header-center .header-cart-items .header-search .modal-main .search-section button,
.header-center .header-cart-items .header-search .modal-main .search-section input,
.header-nav .header-nav-menu .menu-list .header-sub-menu a,
.header-nav .header-nav-menu .menu-list .shop-menu a,
.header-two .header-search-btn .header-input::placeholder,
.header-two .header-search-btn .search-btn,
.header-two .header-search-btn .search-btn::placeholder,
.login-section .review-form .shop-account,
.order-summery .payment-type .inner-text,
.price span,
.review-form .form-control::placeholder,
.review-form .form-select::placeholder,
.review-form input::placeholder,
.review-form label,
.review-form select::placeholder,
.review-form textarea::placeholder,
.seller-information .review-form .form-btn .shop-account,
.testimonial-wrapper .testimonial-details,
.user-dashboard .nav-content .form-section .form-item .form-label,
.user-profile-section .text,
p {
  color: #5f5f5f;
}
.product-info-content .price .new-price,
.product-info-content .product-report .report,
.user-dashboard .nav-content .seller-application-section .account-section .review-form .submit-btn .cancel-btn,
.wishlist-btn .clean-btn {
  color: #c8102e;
}

/* Touch targets: text links were 19–21px tall (footer, breadcrumbs, "Lihat Semua", category names, blog categories). */
.footer a,
.blog-bradcrum a,
.section-title .view,
.category-section .wrapper-details,
.blog-post a,
.product-deal-section .deal-btn,
.product-report .report,
.wishlist-btn .clean-btn,
.cart-btn .clean-btn,
a.clean-btn {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}
.product-share .social-icons a {
  display: inline-flex;
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
}
a.shop-btn.deal-btn {
  min-height: 32px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  line-height: 20px;
}
.product-description .product-details {
  display: inline-block;
  min-height: 24px;
}

/* Hero fade: the outgoing slide's headline showed through the incoming one. Only the active slide shows text. */
.hero-wrapper .swiper-slide .wrapper-info {
  transition: opacity 0.3s ease;
}
.hero-wrapper .swiper-slide:not(.swiper-slide-active) .wrapper-info {
  opacity: 0;
}

/* Cart / favourites tables on phones: the 5-column table scrolled sideways and hid prices.
   Stack each row as a small card instead. */
@media (max-width: 767px) {
  :not(.product-compair) > .container > .cart-section {
    overflow-x: visible !important;
  }
  :not(.product-compair) > .container > .cart-section table,
  :not(.product-compair) > .container > .cart-section tbody {
    display: block;
    width: 100%;
  }
  :not(.product-compair) > .container > .cart-section .table-top-row {
    display: none;
  }
  :not(.product-compair) > .container > .cart-section .table-row.ticket-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 1rem 1.6rem;
    padding: 1.6rem;
    border-bottom: 1px solid rgba(174, 28, 154, 0.12);
  }
  :not(.product-compair) > .container > .cart-section .table-row.ticket-row .table-wrapper {
    display: block;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    border: 0;
  }
  :not(.product-compair) > .container > .cart-section .table-row.ticket-row .wrapper-product {
    grid-column: 1 / -1;
  }
  :not(.product-compair) > .container > .cart-section .table-row.ticket-row .table-wrapper-center {
    justify-content: flex-start;
    width: auto !important;
    min-width: 0 !important;
  }
  :not(.product-compair) > .container > .cart-section table {
    min-width: 0 !important;
  }
  :not(.product-compair) > .container > .cart-section .table-row.ticket-row .table-wrapper:nth-child(2) {
    grid-column: 1;
  }
}

/* Compare table on phones: narrower label column so more of the products fit before the sideways scroll. */
@media (max-width: 575px) {
  .product-compair .vertical-cart .paragraph {
    display: none;
  }
  .product-compair .vertical-cart {
    width: 9rem;
    min-width: 9rem;
  }
}

/* Category dropdowns: product photos as round thumbnails. */
.category-list .dropdown-img img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
}

/* Phone menu had only the category list: add the main pages. */
.mdix-mobile-nav {
  margin: 0 0 1.6rem;
}
.mdix-mobile-nav-title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a1279;
  margin: 1.6rem 0 0.4rem;
}
.mdix-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mdix-mobile-nav a {
  display: block;
  min-height: 44px;
  padding: 1rem 0;
  font-size: 1.6rem;
  font-weight: 500;
  color: #232532;
  border-bottom: 1px solid rgba(174, 28, 154, 0.1);
}
.mdix-mobile-nav a:hover,
.mdix-mobile-nav a:focus-visible {
  color: #8a1279;
}

/* Best sellers: 6 logos in a 5-column grid left one orphan at 767–1200px. */
@media (min-width: 767px) and (max-width: 1200px) {
  .best-selling-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Product cards: the absolute "Tambah ke keranjang" tab covered the price when a name wrapped to two lines.
   Keep names on one line (full name stays in the link title / alt). */
.product-wrapper .product-description .product-details {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Final re-verification 2026-10-13: wordmark redrawn as one line at 2x (was two lines, text ~7–9px). */
.header-center .logo img { width: 230px; height: auto; max-width: none; }
.mobile-header-logo img { width: 190px; height: auto; max-width: 100%; }
.footer-order .logo img { width: 230px; height: auto; max-width: 100%; }
@media (max-width: 380px) { .mobile-header-logo img { width: 165px; } }