/* MASTI — Product Image Ratio */

.s-product-card-image {
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.s-product-card-image > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.s-product-card-image .s-product-card-image-contain {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
/* =========================================================
   MASTI — GLOBAL VISUAL SYSTEM
   Raed Theme / Version 1286497510
   ========================================================= */


/* =========================================================
   01 — BRAND TOKENS
   ========================================================= */

:root {
  --masti-bg: #FBFAF8;
  --masti-white: #FFFFFF;

  --masti-lavender: #EEE7F0;
  --masti-lavender-soft: #F7F3F8;

  --masti-purple: #76527D;
  --masti-purple-hover: #65436B;

  --masti-text: #302630;
  --masti-muted: #756A76;

  --masti-border: #ECE6EC;

  --masti-gold: #C9A15A;
}


/* =========================================================
   02 — GLOBAL BACKGROUND
   ========================================================= */

html,
body {
  background: var(--masti-bg) !important;
  color: var(--masti-text) !important;
}

body {
  font-family: 'Alexandria', sans-serif;
}

.store-content,
.main-content,
.page-content {
  background: var(--masti-bg) !important;
}


/* Keep normal content areas clean */

.s-block {
  background: transparent;
}


/* =========================================================
   03 — HEADER
   ========================================================= */

.store-header {
  position: relative;
  z-index: 50;
  background: var(--masti-white) !important;
}


/* ---------- Top utility bar ---------- */

.store-header .top-navbar {
  background: var(--masti-lavender-soft) !important;
  border-bottom: 1px solid var(--masti-border) !important;
  min-height: 34px;
}

.store-header .top-navbar .container {
  min-height: 34px;
}

.store-header .s-menu-topnav-list {
  display: flex;
  align-items: center;
  gap: 20px;
}

.store-header .s-menu-topnav-item {
  color: var(--masti-muted) !important;
  font-size: 10px !important;
  font-weight: 400;
  text-decoration: none !important;
  transition: color .25s ease;
}

.store-header .s-menu-topnav-item:hover {
  color: var(--masti-purple) !important;
}


/* ---------- Main header ---------- */

.store-header .main-nav-container {
  background: var(--masti-white) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--masti-border) !important;
}

.store-header .main-nav-container .container {
  min-height: 76px;
}


/* ---------- Logo ---------- */

.store-header .navbar-brand {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 115px;
}

.store-header .navbar-brand img {
  width: auto !important;
  height: auto !important;
  max-width: 125px !important;
  max-height: 54px !important;
  object-fit: contain;
}


/* ---------- Search ---------- */

.store-header .header-search {
  max-width: 360px;
}

.store-header .s-search-input-wrapper {
  background: var(--masti-lavender-soft) !important;
  border: 1px solid var(--masti-border) !important;
  border-radius: 22px !important;
  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.store-header .s-search-input-wrapper:focus-within {
  border-color: rgba(118,82,125,.45) !important;
  box-shadow: 0 0 0 3px rgba(118,82,125,.06);
}

.store-header .s-search-input {
  background: transparent !important;
  color: var(--masti-text) !important;
  font-size: 11px !important;
}

.store-header .s-search-input::placeholder {
  color: var(--masti-muted) !important;
}

.store-header .s-search-icon {
  color: var(--masti-purple) !important;
}


/* ---------- Main navigation ---------- */

.store-header custom-main-menu {
  display: block;
}

.store-header custom-main-menu a {
  color: var(--masti-text) !important;
  font-size: 11px !important;
  font-weight: 500;
  text-decoration: none !important;
  transition:
    color .25s ease,
    background .25s ease;
}

.store-header custom-main-menu a:hover {
  color: var(--masti-purple) !important;
}


/* ---------- Header icons ---------- */

.store-header .s-user-menu-login-btn,
.store-header .s-cart-summary-wrapper,
.store-header .header-btn__icon {
  color: var(--masti-text) !important;
}

.store-header .s-user-menu-login-btn,
.store-header .s-cart-summary-wrapper {
  transition:
    color .25s ease,
    transform .25s ease;
}

.store-header .s-user-menu-login-btn:hover,
.store-header .s-cart-summary-wrapper:hover {
  color: var(--masti-purple) !important;
  transform: translateY(-1px);
}


/* Cart number */

.store-header .s-cart-summary-count {
  background: var(--masti-purple) !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF;
}


/* Cart total */

.store-header .s-cart-summary-total {
  color: var(--masti-text) !important;
  font-size: 10px !important;
}


/* ---------- Mobile menu icon ---------- */

.store-header .mburger {
  color: var(--masti-text) !important;
}

.store-header .mburger:hover {
  color: var(--masti-purple) !important;
}


/* =========================================================
   04 — GLOBAL BUTTON SYSTEM
   ========================================================= */

.btn,
.button,
.s-button {
  background: var(--masti-purple) !important;
  border-color: var(--masti-purple) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;

  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.btn:hover,
.button:hover,
.s-button:hover {
  background: var(--masti-purple-hover) !important;
  border-color: var(--masti-purple-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(118,82,125,.16);
}


/* =========================================================
   05 — PRODUCT CARDS
   Keep existing image solution
   ========================================================= */

.s-product-card-image {
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.s-product-card-image > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.s-product-card-image .s-product-card-image-contain {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.product-card {
  background: var(--masti-white) !important;
  border: 1px solid var(--masti-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.product-card:hover {
  border-color: #DED2E0 !important;
  box-shadow: 0 8px 22px rgba(48,38,48,.06) !important;
}


/* =========================================================
   06 — SECTION TITLES
   ========================================================= */

.s-block__title,
.s-block-title {
  color: var(--masti-text) !important;
}

.s-block__title h2,
.s-block-title h2 {
  color: var(--masti-text) !important;
}


/* =========================================================
   07 — SOFT LAVENDER SECTIONS
   ========================================================= */

.s-block--store-features {
  background: var(--masti-lavender-soft) !important;
  border-radius: 16px;
}

.s-block--store-features i {
  color: var(--masti-purple) !important;
}


/* =========================================================
   08 — TESTIMONIALS
   ========================================================= */

.s-block--testimonial {
  background: transparent !important;
}

.s-block--testimonial .testimonial-card {
  background: var(--masti-white) !important;
  border: 1px solid var(--masti-border) !important;
  border-radius: 14px !important;
}


/* =========================================================
   09 — SLIDERS / HERO
   ========================================================= */

.home-slider,
.slider-container {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.s-block--photos-slider img,
.s-block--square-photos img,
.s-block--fixed-banner img {
  border-radius: 14px;
}


/* =========================================================
   10 — MASTI CUSTOM SECTIONS
   ========================================================= */

.masti-promos,
.masti-trust,
.masti-collections,
.masti-newsletter,
.masti-gift {
  font-family: 'Alexandria', sans-serif;
}


/* =========================================================
   11 — FOOTER
   ========================================================= */

.store-footer {
  background: var(--masti-text) !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.store-footer__inner {
  background: var(--masti-text) !important;
}


/* Footer headings */

.store-footer h3,
.store-footer .s-contacts-title {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 16px;
}


/* Brand */

.store-footer a.flex.items-center {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.store-footer a.flex.items-center h3 {
  font-size: 24px !important;
  margin-bottom: 10px;
  letter-spacing: -.3px;
}


/* Description */

.store-footer p {
  color: #D8CED9 !important;
  font-size: 11px !important;
  line-height: 1.9 !important;
}


/* Footer links */

.store-footer .s-menu-footer-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.store-footer .s-menu-footer-item {
  color: #D8CED9 !important;
  font-size: 10px !important;
  text-decoration: none !important;

  transition:
    color .25s ease,
    padding-right .25s ease;
}

.store-footer .s-menu-footer-item:hover {
  color: #FFFFFF !important;
  padding-right: 3px;
}


/* Contact */

.store-footer .s-contacts-item {
  color: #D8CED9 !important;
  font-size: 11px !important;
  text-decoration: none !important;
}

.store-footer .s-contacts-icon {
  color: var(--masti-lavender) !important;
}

.store-footer .s-contacts-item:hover {
  color: #FFFFFF !important;
}


/* Social */

.store-footer .s-social-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-footer .s-social-list a {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;

  color: #E4CAE7 !important;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.store-footer .s-social-list a:hover {
  background: var(--masti-purple);
  border-color: var(--masti-purple);
  color: #FFFFFF !important;
  transform: translateY(-2px);
}


/* Trust badge */

.store-footer .s-trust-badges-wrapper {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px;
  padding: 8px 10px;
}

.store-footer .s-trust-badges-label {
  color: #BFB3C2 !important;
  font-size: 9px !important;
}

.store-footer .s-trust-badges-number {
  color: #FFFFFF !important;
  font-size: 10px !important;
}


/* Footer bottom */

.store-footer > .md\:flex {
  border-top: 1px solid rgba(255,255,255,.09);
  margin-top: 8px;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}


/* Copyright */

.store-footer .copyright-text,
.store-footer .copyright-text p {
  color: #AFA3B1 !important;
  font-size: 9px !important;
}

.store-footer .copyright-text a {
  color: #D8CED9 !important;
}

.store-footer .copyright-text a:hover {
  color: #FFFFFF !important;
}


/* Payment methods */

.store-footer .s-payments-list {
  display: flex;
  align-items: center;
  gap: 6px;
}

.store-footer .s-payments-list-item {
  background: #FFFFFF;
  border-radius: 5px;
  padding: 3px;
  opacity: .9;
}


/* =========================================================
   12 — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  /* Header */

  .store-header .top-navbar {
    display: none !important;
  }

  .store-header .main-nav-container {
    border-bottom: 1px solid var(--masti-border) !important;
  }

  .store-header .main-nav-container .container {
    min-height: 62px;
  }

  .store-header .navbar-brand {
    min-width: 90px;
  }

  .store-header .navbar-brand img {
    max-width: 95px !important;
    max-height: 42px !important;
  }

  .store-header .s-user-menu-login-btn,
  .store-header .s-cart-summary-wrapper {
    transform: none !important;
  }

  .store-header .s-cart-summary-content {
    display: none !important;
  }

  .store-header .s-cart-summary-wrapper {
    margin-right: 8px !important;
  }


  /* Mobile body */

  body {
    background: var(--masti-bg) !important;
  }


  /* Sections */

  .s-block {
    margin-bottom: 20px;
  }

  .home-slider,
  .slider-container {
    border-radius: 12px !important;
  }


  /* Footer */

  .store-footer {
    margin-top: 12px;
  }

  .store-footer__inner {
    padding-top: 30px !important;
    padding-bottom: 24px !important;
  }

  .store-footer .container {
    gap: 26px !important;
  }

  .store-footer h3 {
    font-size: 13px !important;
    margin-bottom: 10px;
  }

  .store-footer a.flex.items-center h3 {
    font-size: 22px !important;
  }

  .store-footer .s-menu-footer-list {
    gap: 8px;
  }

  .store-footer .s-menu-footer-item {
    font-size: 10px !important;
  }

  .store-footer .s-contacts-item {
    font-size: 11px !important;
  }

  .store-footer .s-social-list {
    gap: 7px;
  }

  .store-footer .s-social-list a {
    width: 32px;
    height: 32px;
  }

  .store-footer > .md\:flex {
    margin-top: 0;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .store-footer .s-payments-list {
    justify-content: center;
    margin-top: 10px;
  }

  .store-footer .copyright-text {
    text-align: center;
    display: block;
  }


  /* Existing custom sections */

  .masti-trust {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .masti-collections {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .masti-gift {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

}


/* =========================================================
   13 — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .store-header .main-nav-container .container {
    min-height: 58px;
  }

  .store-header .navbar-brand img {
    max-width: 88px !important;
    max-height: 38px !important;
  }

  .store-header .header-search {
    max-width: none;
  }

}