/* ==============================================
   AUL'S SKINCARE - RESPONSIVE CSS
   ============================================== */

:root {
  --pink: #ff4d93;
  --pink-dark: #e91e73;
  --pink-soft: #f7a1c3;
  --pink-border: #ffc1d9;
  --text: #333;
}

/* ── BASE ── */
html, body { overflow-x: hidden !important; }

body {
  background: linear-gradient(180deg, #fff8fb 0%, #fff1f7 50%, #ffeaf3 100%) !important;
  font-family: Arial, sans-serif !important;
  color: var(--text) !important;
}

img { max-width: 100% !important; height: auto !important; }

.site-grid { max-width: 1250px !important; margin: 0 auto !important; width: 100% !important; }
main { width: 100% !important; }

/* =============================================
   HEADER — reset total, semua center
   Cassiopeia: body=flex-col, header=full-width
   grid-child di dalam header punya
   justify-content:space-between & display:inline-block pada brand
   ============================================= */

/* 1. Reset container header */
.container-header {
  background: #ffeaf3 !important;
  box-shadow: 0 5px 20px rgba(255,77,147,.10) !important;
  padding: 20px 20px 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  /* Ganti grid Cassiopeia menjadi block biasa */
  display: block !important;
  text-align: center !important;
}

/* 2. Reset .grid-child di dalam header */
.container-header > .grid-child {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
}

/* 3. navbar-brand: paksa jadi block, center */
.container-header .navbar-brand {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  /* reset semua Cassiopeia inline/margin */
  margin-inline-end: 0 !important;
  margin-inline-start: 0 !important;
  float: none !important;
  text-decoration: none !important;
  white-space: normal !important;
}

/* 4. brand-logo link: block + center */
.container-header .navbar-brand a,
.container-header .navbar-brand .brand-logo {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

/* 5. Logo image: block auto margin */
.container-header .navbar-brand img {
  display: block !important;
  margin: 0 auto !important;
  width: 85px !important;
  height: auto !important;
}

/* 6. Nama toko via ::before */
.container-header .navbar-brand::before {
  content: "Aul's Skincare" !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  color: #ff5fa2 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  margin-top: 6px !important;
}

/* 7. Deskripsi toko */
.container-header .site-description {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  color: var(--pink-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 3px !important;
  white-space: normal !important;
}

/* 8. Container nav: block + center */
.container-header .container-nav {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 12px !important;
  padding: 0 !important;
  overflow-x: auto !important;
}

/* 9. Menu list: inline-flex centered */
.container-header .mod-menu,
.container-header .navbar-nav {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

.container-header .mod-menu > li,
.container-header .navbar-nav > li {
  display: inline-flex !important;
  margin: 0 !important;
}

.container-header .mod-menu a,
.container-header .navbar-nav a {
  color: var(--pink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.container-header .mod-menu a:hover,
.container-header .navbar-nav a:hover { color: var(--pink-dark) !important; }

.container-header .mod-menu .fa,
.container-header .mod-menu .fas,
.container-header .mod-menu .fa-solid { font-size: 18px !important; }

/* ── SEARCH BAR ── */
.auls-custom-search {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 14px auto 0 !important;
  box-sizing: border-box !important;
}

.auls-custom-search form {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.auls-custom-search input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 44px !important;
  border: 2px solid var(--pink-border) !important;
  border-right: none !important;
  border-radius: 25px 0 0 25px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  background: #fff !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.auls-custom-search button {
  flex-shrink: 0 !important;
  width: 52px !important;
  height: 44px !important;
  border: none !important;
  border-radius: 0 25px 25px 0 !important;
  background: var(--pink) !important;
  color: #fff !important;
  cursor: pointer !important;
}

/* ── FOOTER — reset total, center ── */
.footer, .container-footer, .site-footer {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #ffe4ef !important;
  background-image: none !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* reset grid-child Cassiopeia di footer */
.container-footer > .grid-child,
footer > .grid-child,
footer .grid-child {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.auls-footer {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 40px 20px 24px !important;
  background: linear-gradient(135deg, #ffe1ee, #fff1f7, #ffd6e8) !important;
  border-top: 4px solid #ff9bc2 !important;
  text-align: center !important;
  color: #e91e73 !important;
  box-shadow: 0 -8px 25px rgba(255,77,147,.12) !important;
  box-sizing: border-box !important;
}

.auls-footer h2 {
  color: #ff4d93 !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}

.auls-footer-brand p {
  color: #f48bb6 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 22px !important;
  text-align: center !important;
}

.auls-footer-info {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  max-width: 860px !important;
  margin: 0 auto 22px !important;
}

.auls-footer-info div {
  background: #fff !important;
  border: 2px solid #ffc1d9 !important;
  border-radius: 18px !important;
  padding: 10px 16px !important;
  color: #e91e73 !important;
  font-weight: 700 !important;
  box-shadow: 0 5px 15px rgba(255,77,147,.10) !important;
}

.auls-footer-bottom {
  border-top: 1px dashed #ff9bc2 !important;
  padding-top: 16px !important;
  color: #d81b60 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* ── HIDE SIDEBAR & BREADCRUMB ── */
.sidebar-right, .container-sidebar-right,
.breadcrumb, .mod-breadcrumbs, .breadcrumbs, .container-breadcrumbs { display: none !important; }

/* ── STORE DESCRIPTION ── */
.auls-description {
  text-align: center !important; max-width: 900px !important;
  margin: 30px auto !important; padding: 0 15px !important;
}
.auls-description h2 { color: #ff5fa2 !important; font-size: 32px !important; font-weight: 900 !important; }
.auls-description p  { font-size: 17px !important; line-height: 1.8 !important; color: #555 !important; }

/* ── CATEGORY VIEW ── */
.category-view { max-width: 1200px !important; margin: 35px auto !important; text-align: center !important; padding: 0 15px !important; }

.category-view h1, .category-view h2, .category-view h3,
.category h2, .category h3, .category span, .category-name, .category-view .category-title {
  color: var(--pink) !important; font-size: 32px !important; font-weight: 900 !important;
}
.category-view p { max-width: 900px !important; margin: 0 auto 30px !important; font-size: 16px !important; line-height: 1.7 !important; color: #555 !important; }
.category-view .row, .category-view .categories { display: flex !important; justify-content: center !important; gap: 20px !important; flex-wrap: wrap !important; }

.category-view .category {
  width: 220px !important; max-width: 100% !important; background: #fff !important;
  border: 2px solid #ffd1e3 !important; border-radius: 24px !important; padding: 18px !important;
  box-shadow: 0 8px 22px rgba(255,77,147,.12) !important; box-sizing: border-box !important;
}
.category-view .category img { width: 100% !important; max-width: 170px !important; height: 120px !important; object-fit: cover !important; border-radius: 14px !important; margin-bottom: 12px !important; }
.category-view a { color: var(--pink) !important; font-size: 18px !important; font-weight: 800 !important; text-decoration: none !important; }

/* ── HIDE SORT ── */
.orderby-displaynumber, .vm-order-list, .orderlistcontainer, .display-number { display: none !important; }

/* ── ITEM-ID RULES ── */
body.itemid-126 .category-view > h1, body.itemid-126 .category-view > h2,
body.itemid-126 .category-view > h3, body.itemid-126 .category-view > p,
body.itemid-126 .category-view > div:not(.browse-view):not(.products-view) { display: none !important; }
body.itemid-126 .browse-view, body.itemid-126 .products-view { display: block !important; }
body.itemid-101 .browse-view, body.itemid-101 .vm-product-container,
body.itemid-101 .product, body.itemid-101 .vm-products, body.itemid-101 .vmproduct { display: none !important; }
body.itemid-125 .browse-view, body.itemid-125 .product, body.itemid-125 .productdetails,
body.itemid-125 .vm-product-container, body.itemid-125 .vm-products, body.itemid-125 .category-product { display: none !important; }

.vm-checkout-login a.btn-secondary { display: none !important; }

/* ── BUTTONS ── */
.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-secondary,.btn {
  background: #ff4d93 !important; border-color: #ff4d93 !important; color: #fff !important;
}
.btn:hover,.btn-primary:hover,.btn-success:hover,.btn-info:hover,
.btn-warning:hover,.btn-danger:hover,.btn-secondary:hover {
  background: #e91e73 !important; border-color: #e91e73 !important; color: #fff !important;
}
.addtocart-button,.addtocart-button input,.vm-button-correct,.vm-button {
  background: #ff4d93 !important; border: none !important; color: #fff !important; border-radius: 12px !important;
}
.addtocart-button:hover,.vm-button:hover { background: #e91e73 !important; }
.login button,.login .btn-primary { background: #ff4d93 !important; border-color: #ff4d93 !important; }
.checkout-button-top,.checkout-button-bottom,button.checkout_button,button[name="checkout"] {
  background: #ff4d93 !important; border-color: #ff4d93 !important; color: #fff !important;
}
.quantity-controls button,.quantity-box button {
  background: #fff1f7 !important; color: #ff4d93 !important; border: 2px solid #ff4d93 !important;
}

/* ── CART ── */
.cart-view h1,.cart-view h2,.cart-view h3,.cart-view legend,.cart-view .checkout-title,
.cart-view .vm-fieldset-pricelist h3,.cart-view .vm-fieldset-tos h3,
.cart-view .customer-comment h3,.cart-view fieldset > h3,
.cart-view .billto-shipto h3,.cart-view .userfields_info { color: #ff4d93 !important; font-weight: 900 !important; }
.cart-view strong,.cart-view b { color: #ff4d93 !important; }
.cart-view .btn,.cart-view button,.cart-view input[type="submit"],.cart-view input[type="button"],
.vm-button-correct,.addtocart-button,button[name="checkout"] {
  background: #ff4d93 !important; border-color: #ff4d93 !important; color: #fff !important; border-radius: 8px !important;
}
.cart-view .btn:hover,.cart-view button:hover,.cart-view input[type="submit"]:hover,
.cart-view input[type="button"]:hover,.vm-button-correct:hover {
  background: #e91e73 !important; border-color: #e91e73 !important;
}
.cart-view a { color: #ff4d93 !important; }
.cart-view input:focus,.cart-view select:focus,.cart-view textarea:focus {
  border-color: #ff4d93 !important; box-shadow: 0 0 0 2px rgba(255,77,147,.15) !important;
}
h1.vm-page-title,.vm-page-title { color: #ff4d93 !important; font-weight: 900 !important; }

/* ── HOME PRODUCT GRID ── */
.home-product-grid {
  display: grid !important; grid-template-columns: repeat(4,1fr) !important;
  gap: 22px !important; padding: 20px !important;
}
.home-product-card {
  background: #fff !important; border: 2px solid #ffc1d9 !important;
  border-radius: 20px !important; padding: 15px !important;
  text-align: center !important; transition: .3s !important; box-sizing: border-box !important;
}
.home-product-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 20px rgba(255,77,147,.15) !important; }
.home-product-card img { width: 130px !important; height: 160px !important; object-fit: contain !important; display: block !important; margin: 0 auto 10px !important; }
.home-product-card h3 { color: #ff4d93 !important; font-size: 17px !important; font-weight: 900 !important; margin-top: 8px !important; }
.home-product-card p  { color: #333 !important; font-size: 16px !important; font-weight: 700 !important; }

.auls-product-section { width: 100% !important; max-width: 100% !important; display: block !important; clear: both !important; grid-column: 1/-1 !important; margin: 35px 0 !important; }
.auls-product-section .home-product-grid { grid-template-columns: repeat(4,1fr) !important; }
.auls-product-section .home-product-card { width: 100% !important; min-width: 0 !important; }

/* ── VMGROUP / VMPRODUCT ── */
.vmgroup,.vmproduct { display: flex !important; flex-wrap: wrap !important; gap: 18px !important; justify-content: center !important; }
.vmgroup .productdetails,.vmgroup .product,.vmproduct .product {
  width: calc(25% - 18px) !important; min-width: 200px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  margin: 0 !important; text-align: center !important; background: #fff !important;
  border: 2px solid #ffd6e7 !important; border-radius: 18px !important; padding: 15px !important; box-sizing: border-box !important;
}
.vmgroup img,.vmproduct img { width: 160px !important; height: 160px !important; object-fit: contain !important; margin: auto !important; display: block !important; max-width: 100% !important; }
.vmgroup h2,.vmgroup h3,.vmgroup .product_name,.vmproduct h2,.vmproduct h3 { color: #ff4d93 !important; font-size: 17px !important; font-weight: 800 !important; }
.vmgroup .PricesalesPrice,.vmgroup .product-price,.vmproduct .PricesalesPrice { color: #333 !important; font-size: 16px !important; font-weight: bold !important; }
.vmgroup .addtocart-button,.vmproduct .addtocart-button { background: #ff4d93 !important; border: none !important; color: #fff !important; border-radius: 10px !important; padding: 8px 14px !important; }

/* ── MODULE TITLES ── */
.moduletable h3,.card-header,.home-featured h3 { color: #ff4d93 !important; font-size: 28px !important; font-weight: 900 !important; }

/* ── BACKGROUNDS ── */
body,.site-grid,main,.container-component,.com-content-article,.blog,.item-page,
.category-view,.vm-category,#content,.container-main,main .container,main > div { background: #ffe9f3 !important; }
.home-product-card,.category-view .category { background: #fff !important; }
.container-header { background: #ffeaf3 !important; }

/* ── ACCOUNT TABS ── */
#tabs > li:nth-child(2),#tabs a[href*="layout=list"],#tabs a[href*="view=orders"] { display: none !important; }
#tabs > li,#tabs > li.current,#tabs > li.active {
  background: linear-gradient(135deg,#ff6aa8,#ff4d93) !important; border: none !important; border-radius: 12px 12px 0 0 !important; margin-right: 5px !important;
}
#tabs > li a { color: #fff !important; font-weight: 700 !important; padding: 8px 15px !important; display: block !important; }
#tabs > li:hover { background: linear-gradient(135deg,#ff4d93,#e91e73) !important; }

/* ── ALERTS ── */
.joomla-alert,.alert,.alert-wrapper { border-radius: 15px !important; overflow: hidden !important; border: 2px solid #ffb6d5 !important; }
.joomla-alert,.alert,.alert-info { background: #fff1f7 !important; border: 2px solid #ffc1d9 !important; color: #333 !important; }
.joomla-alert--success .alert-heading,.alert-success .alert-heading { background: #ff4d93 !important; }
.joomla-alert--danger .alert-heading,.alert-danger .alert-heading { background: #ff7bac !important; }
.joomla-alert--info .alert-heading,.alert-info .alert-heading,.alert-info i,.alert-info svg { background: #ff4d93 !important; color: #fff !important; fill: #fff !important; }
.joomla-alert .alert-wrapper,.alert-success,.alert-danger,.alert-info { background: #fff0f6 !important; color: #444 !important; }
.joomla-alert-button--close,.joomla-alert .joomla-alert-button--close { color: #ff4d93 !important; opacity: 1 !important; }
.alert-success { border-left: 5px solid #ff4d93 !important; }
.alert-danger  { border-left: 5px solid #ff7bac !important; }
.alert-info    { border-left: 5px solid #ff9bc3 !important; }
#system-message-container .alert-heading,#system-message-container joomla-alert .alert-heading { background: #ff4d93 !important; color: #fff !important; }
#system-message-container joomla-alert,#system-message-container .alert { border: 2px solid #ff9bc5 !important; background: #fff1f7 !important; border-radius: 14px !important; overflow: hidden !important; }
.alert a,.joomla-alert a { color: #e91e73 !important; font-weight: 700 !important; }
.joomla-alert button,.joomla-alert .btn-close,.alert .btn-close { color: #ff4d93 !important; opacity: 1 !important; }

/* ── RATINGS & STOCK ── */
.vm-ratingbox-rated svg,.vm-ratingbox-rated i { color: #ff4d93 !important; fill: #ff4d93 !important; }
.vm-ratingbox-unrated svg,.vm-ratingbox-unrated i { color: #ff9bc3 !important; fill: #ff9bc3 !important; }
.bi-square-fill,.vm-stock-status svg,.vm-stock-status i,.vm-stock-status path { color: #ff4d93 !important; fill: #ff4d93 !important; }
.vm-stock-status { color: #ff4d93 !important; }

/* ── FORM INPUTS ── */
.form-control,input[type="text"],input[type="password"],input[type="email"] { border: 2px solid #ffc1d9 !important; background: #fff8fb !important; color: #333 !important; }
.form-control:focus,input:focus { border-color: #ff4d93 !important; box-shadow: 0 0 0 4px rgba(255,77,147,.20) !important; background: #fff !important; }
.input-password-toggle,.password-icon,.btn-password { background: #ff4d93 !important; border-color: #ff4d93 !important; color: #fff !important; }
.form-check-input:checked { background-color: #ff4d93 !important; border-color: #ff4d93 !important; }
.login .list-group-item,.com-users-login .list-group-item,.list-group a,.list-group-item a { background: #fff1f7 !important; color: #ff4d93 !important; border: 2px solid #ffc1d9 !important; font-weight: 700 !important; }
.list-group-item:hover { background: #ffe1ef !important; color: #e91e73 !important; }
.list-group-item { border-color: #ffc1d9 !important; }

/* ── ADD TO CART POPUP ── */
.vm-added-product,.vm-added-message { background: #fff1f7 !important; border: 2px solid #ffc1d9 !important; border-radius: 15px !important; padding: 15px 20px !important; color: #333 !important; font-weight: 600 !important; text-align: center !important; }

/* ==============================================
   RESPONSIVE BREAKPOINTS
   ============================================== */

/* ── TABLET LANDSCAPE (769–1199px) ── */
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .home-product-grid, .auls-product-section .home-product-grid { grid-template-columns: repeat(3,1fr) !important; }
  .vmgroup .productdetails,.vmgroup .product,.vmproduct .product { width: calc(33.33% - 18px) !important; }
  .category-view .category { width: 200px !important; }
  .auls-description h2 { font-size: 28px !important; }
  .category-view h1,.category-view h2,.category h2 { font-size: 28px !important; }
}

/* ── TABLET PORTRAIT (≤768px) ── */
@media screen and (max-width: 768px) {
  .container-header { padding: 18px 15px 22px !important; }

  /* Search */
  .auls-custom-search { max-width: 100% !important; padding: 0 10px !important; margin: 12px auto 0 !important; box-sizing: border-box !important; }
  .auls-custom-search input { font-size: 15px !important; height: 46px !important; padding: 0 18px !important; }
  .auls-custom-search button { width: 52px !important; height: 46px !important; }

  /* Menu scroll */
  .container-header .container-nav { overflow-x: auto !important; scrollbar-width: none !important; }
  .container-header .container-nav::-webkit-scrollbar { display: none !important; }
  .container-header .mod-menu,.container-header .navbar-nav { flex-wrap: nowrap !important; gap: 0 14px !important; }

  /* Grids 2 col */
  .home-product-grid,.auls-product-section .home-product-grid { grid-template-columns: repeat(2,1fr) !important; gap: 14px !important; padding: 10px !important; }
  .home-product-card img { width: 110px !important; height: 130px !important; }
  .home-product-card h3 { font-size: 14px !important; }
  .home-product-card p  { font-size: 13px !important; }
  .vmgroup .productdetails,.vmgroup .product,.vmproduct .product { width: calc(50% - 14px) !important; min-width: 140px !important; }

  /* Text */
  .auls-description h2 { font-size: 26px !important; }
  .auls-description p  { font-size: 15px !important; }
  .category-view h1,.category-view h2,.category h2 { font-size: 24px !important; }
  .moduletable h3,.card-header { font-size: 22px !important; }
  .category-view .category { width: calc(50% - 14px) !important; min-width: 140px !important; }

  /* Footer */
  .auls-footer h2 { font-size: 24px !important; }
  .auls-footer-info { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; max-width: 95% !important; }
  .auls-footer-info div { width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
}

/* ── MOBILE (≤480px) ── */
@media screen and (max-width: 480px) {
  .container-header { padding: 14px 10px 18px !important; }
  .container-header .navbar-brand::before { font-size: 22px !important; }
  .container-header .navbar-brand img { width: 70px !important; }
  .container-header .mod-menu a,.container-header .navbar-nav a { font-size: 13px !important; padding: 5px 8px !important; }

  .auls-custom-search { padding: 0 6px !important; }
  .auls-custom-search input { font-size: 15px !important; height: 46px !important; }
  .auls-custom-search button { width: 52px !important; height: 46px !important; }

  .home-product-grid,.auls-product-section .home-product-grid { grid-template-columns: 1fr !important; max-width: 300px !important; margin: 0 auto !important; }
  .vmgroup .productdetails,.vmgroup .product,.vmproduct .product { width: 100% !important; min-width: 0 !important; }
  .category-view .category { width: 100% !important; max-width: 300px !important; }

  .auls-description h2 { font-size: 22px !important; }
  .auls-description p  { font-size: 14px !important; }
  .category-view h1,.category-view h2 { font-size: 20px !important; }
  .moduletable h3,.card-header { font-size: 18px !important; padding-left: 10px !important; }

  .auls-footer h2 { font-size: 20px !important; }
  .auls-footer-info { grid-template-columns: 1fr !important; max-width: 85% !important; }
  .auls-footer-brand p { font-size: 14px !important; }
}

/* ── EXTRA SMALL (≤360px) ── */
@media screen and (max-width: 360px) {
  .container-header .mod-menu,.container-header .navbar-nav { gap: 0 8px !important; }
  .container-header .mod-menu a,.container-header .navbar-nav a { font-size: 12px !important; padding: 4px 6px !important; }
}