/* Add custom CSS styles below */ 
/* =========================================================
   CLASSY GALLERY — WEBSITE STYLE V3
   Theme direction: Cream / Blush / Elegant / Feminine
   Store: Classy Gallery
   ========================================================= */


/* =========================
   1. GLOBAL VARIABLES
   ========================= */

:root {
  --classy-primary: #BC6F6B;
  --classy-primary-dark: #985653;
  --classy-primary-light: #D9A09B;

  --classy-rose: #E8C3BF;
  --classy-blush: #F5DEDA;

  --classy-cream: #FCF8F4;
  --classy-soft: #F8F0EA;
  --classy-beige: #F1E5DA;
  --classy-white: #FFFFFF;

  --classy-text: #382925;
  --classy-text-soft: #786863;
  --classy-border: #EADDD5;

  --classy-gold: #B99A67;

  --classy-radius: 18px;
  --classy-radius-small: 12px;
  --classy-radius-large: 26px;

  --classy-shadow:
    0 8px 30px rgba(70, 47, 40, 0.07);

  --classy-shadow-hover:
    0 14px 38px rgba(70, 47, 40, 0.11);

  --classy-container: 1440px;
}


/* =========================
   2. GLOBAL PAGE
   ========================= */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--classy-white);
  color: var(--classy-text);
  font-family:
    "Tajawal",
    "DIN Next LT Arabic",
    Arial,
    sans-serif;
}

body,
.salla-theme {
  overflow-x: hidden;
}

.container,
.s-container {
  max-width: var(--classy-container);
}

a {
  transition: all .25s ease;
}

section {
  position: relative;
}

::selection {
  background: var(--classy-blush);
  color: var(--classy-text);
}


/* =========================
   3. HEADER
   ========================= */

.store-header,
header {
  background: rgba(255,255,255,.96);
}

.main-nav-container,
.navbar-container,
.header-inner {
  background: #fff;
}

.store-header {
  border-bottom: 1px solid rgba(188,111,107,.10);
}

.navbar-brand img,
.store-header img[alt*="logo"],
header .logo img {
  max-height: 64px;
  object-fit: contain;
}


/* Header icons */

.store-header .sicon-cart,
.store-header .sicon-user,
.store-header .sicon-search,
header .sicon-cart,
header .sicon-user,
header .sicon-search {
  color: var(--classy-text);
}


/* =========================
   4. SEARCH BAR
   ========================= */

.s-search-input,
.search-input,
input[type="search"] {
  background: var(--classy-cream) !important;
  border: 1px solid var(--classy-border) !important;
  border-radius: 50px !important;
  min-height: 46px;
  color: var(--classy-text);
  box-shadow: none !important;
}

.s-search-input:focus,
.search-input:focus,
input[type="search"]:focus {
  border-color: var(--classy-primary) !important;
  box-shadow:
    0 0 0 3px rgba(188,111,107,.10) !important;
}


/* =========================
   5. MAIN MENU
   ========================= */

.main-menu,
.main-menu > li > a,
.main-nav-container a {
  color: var(--classy-text);
}

.main-menu > li > a {
  font-weight: 500;
  font-size: 15px;
}

.main-menu > li > a:hover,
.main-nav-container a:hover {
  color: var(--classy-primary);
}

.main-menu li:hover > a {
  color: var(--classy-primary);
}


/* Dropdown */

.main-menu .sub-menu,
.main-menu ul {
  border-radius: 14px;
  border: 1px solid var(--classy-border);
  box-shadow: var(--classy-shadow);
}


/* =========================
   6. HOME HERO BANNER
   ========================= */

.s-block--hero-slider,
.s-block--slider,
.hero-slider,
.home-slider {
  margin-top: 14px;
}

.s-block--hero-slider img,
.s-block--slider img,
.hero-slider img,
.home-slider img,
salla-slider img {
  border-radius: var(--classy-radius-large);
}


/* Prevent overly sharp banner corners */

.swiper-slide img {
  overflow: hidden;
}


/* =========================
   7. SECTION SPACING
   ========================= */

.home section,
.s-block {
  margin-top: 48px;
  margin-bottom: 48px;
}

.s-block__title,
.section-title,
.home-block-title {
  margin-bottom: 24px;
}


/* =========================
   8. SECTION TITLES
   ========================= */

.s-block__title h2,
.section-title h2,
.home-block-title,
h2.section-title {
  color: var(--classy-text);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.3px;
}

.s-block__title p,
.section-title p {
  color: var(--classy-text-soft);
}


/* Small decorative line */

.s-block__title h2::after {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  margin-top: 9px;
  border-radius: 10px;
  background: var(--classy-primary);
}


/* =========================
   9. CATEGORY SECTION
   ========================= */

/*
   IMPORTANT:
   Category images stay square.
   This is the section where our:
   Clothes / Cookware / Garden /
   Furniture / Gifts / Antiques / Decor
   images will go.
*/

.s-block--categories img,
.s-block--categories-with-images img,
.categories-container img,
.category-card img,
.category-entry img {
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--classy-radius) !important;
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


/* Category card */

.s-block--categories a,
.s-block--categories-with-images a,
.category-card,
.category-entry {
  border-radius: var(--classy-radius);
  overflow: hidden;
}


/* Hover */

.s-block--categories a:hover img,
.s-block--categories-with-images a:hover img,
.category-card:hover img,
.category-entry:hover img {
  transform: scale(1.025);
}


/* Category title */

.s-block--categories h3,
.s-block--categories .category-name,
.s-block--categories-with-images h3,
.category-card h3,
.category-entry h3 {
  color: var(--classy-text);
  font-weight: 600;
  margin-top: 12px;
  text-align: center;
}


/* =========================
   10. PRODUCT CARDS
   ========================= */

.s-product-card-entry,
.product-entry,
.product-card {
  background: var(--classy-white) !important;
  border: 1px solid #F0E6E1 !important;
  border-radius: var(--classy-radius) !important;
  overflow: hidden;
  box-shadow: none !important;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.s-product-card-entry:hover,
.product-entry:hover,
.product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(188,111,107,.25) !important;
  box-shadow: var(--classy-shadow-hover) !important;
}


/* Product image */

.s-product-card-image,
.product-entry__image,
.product-card img {
  background: var(--classy-cream);
}

.s-product-card-image img,
.product-entry__image img {
  transition: transform .45s ease;
}

.s-product-card-entry:hover
.s-product-card-image img {
  transform: scale(1.025);
}


/* Product title */

.s-product-card-content-title,
.product-entry__title,
.product-card-title {
  color: var(--classy-text) !important;
  font-weight: 500;
  line-height: 1.7;
}


/* Price */

.s-product-card-price,
.product-entry__price {
  color: var(--classy-primary-dark) !important;
  font-weight: 700;
}


/* Old price */

.s-product-card-sale-price,
.price-before {
  color: #AAA !important;
}


/* =========================
   11. ADD TO CART BUTTONS
   ========================= */

.s-button-primary,
button.s-button-primary,
.s-product-card-entry .s-button-element,
.btn-primary,
.add-to-cart {
  background: var(--classy-primary) !important;
  border-color: var(--classy-primary) !important;
  color: white !important;
  border-radius: 50px !important;
  transition: .25s ease;
}

.s-button-primary:hover,
button.s-button-primary:hover,
.s-product-card-entry .s-button-element:hover,
.btn-primary:hover,
.add-to-cart:hover {
  background: var(--classy-primary-dark) !important;
  border-color: var(--classy-primary-dark) !important;
}


/* Secondary */

.s-button-outline,
.btn-outline {
  border-color: var(--classy-primary) !important;
  color: var(--classy-primary) !important;
  border-radius: 50px !important;
}


/* =========================
   12. WIDE PROMO BANNERS
   ========================= */

.s-block--banners img,
.banner-entry img,
.home-banner img,
.banner img {
  width: 100%;
  border-radius: var(--classy-radius-large) !important;
  object-fit: cover;
}

.s-block--banners a,
.banner-entry,
.home-banner {
  border-radius: var(--classy-radius-large);
  overflow: hidden;
}


/* =========================
   13. PRODUCT SLIDERS
   ========================= */

.s-slider-block,
salla-slider {
  --swiper-theme-color: var(--classy-primary);
}

.swiper-button-next,
.swiper-button-prev {
  background: white;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50%;
  box-shadow: var(--classy-shadow);
  color: var(--classy-primary) !important;
}


/* =========================
   14. BADGES / SALE LABELS
   ========================= */

.s-product-card-promotion-title,
.sale-badge,
.product-badge {
  background: var(--classy-primary) !important;
  color: white !important;
  border-radius: 50px !important;
  padding: 5px 10px;
}


/* =========================
   15. COLLECTION BLOCKS
   ========================= */

.collection-card,
.s-block--collections a {
  border-radius: var(--classy-radius-large);
  overflow: hidden;
}

.collection-card img,
.s-block--collections img {
  border-radius: var(--classy-radius-large);
  transition: transform .4s ease;
}

.collection-card:hover img,
.s-block--collections a:hover img {
  transform: scale(1.025);
}


/* =========================
   16. REVIEWS
   ========================= */

.testimonial-card,
.s-reviews-card,
.review-card {
  background: var(--classy-cream) !important;
  border: 1px solid var(--classy-border);
  border-radius: var(--classy-radius);
  padding: 22px;
}


/* =========================
   17. NEWSLETTER
   ========================= */

.newsletter,
.s-block--newsletter {
  background:
    linear-gradient(
      135deg,
      var(--classy-cream),
      var(--classy-blush)
    ) !important;

  border-radius: var(--classy-radius-large);
  padding: 38px 30px;
}

.newsletter input,
.s-block--newsletter input {
  background: white !important;
  border: 1px solid var(--classy-border) !important;
  border-radius: 50px !important;
}


/* =========================
   18. PRODUCT PAGE
   ========================= */

.product-main-image img,
.product-slider img,
.product-gallery img {
  border-radius: var(--classy-radius);
}

.product-details,
.product-form {
  color: var(--classy-text);
}


/* Product page quantity */

.s-quantity-input-container {
  border-radius: 50px !important;
  border-color: var(--classy-border) !important;
}


/* =========================
   19. CART
   ========================= */

.cart-item,
.cart-product {
  border-radius: var(--classy-radius-small);
}

.cart-summary {
  background: var(--classy-cream);
  border-radius: var(--classy-radius);
}


/* =========================
   20. FOOTER
   ========================= */

.store-footer,
footer {
  background: #F8F0EA !important;
  color: var(--classy-text) !important;
}

.store-footer h3,
.store-footer h4,
footer h3,
footer h4 {
  color: var(--classy-text) !important;
  font-weight: 600;
}

.store-footer a,
footer a {
  color: var(--classy-text-soft) !important;
}

.store-footer a:hover,
footer a:hover {
  color: var(--classy-primary) !important;
}

.store-footer .social-link,
footer .social-link {
  border-radius: 50%;
}


/* Bottom copyright */

.store-footer .copyrights,
footer .copyrights {
  border-top:
    1px solid rgba(188,111,107,.12);
}


/* =========================
   21. FLOATING WHATSAPP
   ========================= */

.whatsapp-button,
.salla-whatsapp-button {
  box-shadow:
    0 8px 25px rgba(0,0,0,.12);
}


/* =========================
   22. MOBILE BOTTOM NAV
   ========================= */

.bottom-navigation,
.mobile-bottom-nav {
  background: rgba(255,255,255,.97) !important;
  border-top:
    1px solid var(--classy-border);
  backdrop-filter: blur(10px);
}

.bottom-navigation a,
.mobile-bottom-nav a {
  color: var(--classy-text-soft);
}

.bottom-navigation .active,
.mobile-bottom-nav .active {
  color: var(--classy-primary);
}


/* =========================
   23. MOBILE
   ========================= */

@media (max-width: 767px) {

  :root {
    --classy-radius: 14px;
    --classy-radius-large: 18px;
  }


  /* Reduce page padding */

  .container,
  .s-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }


  /* Header */

  .navbar-brand img,
  .store-header img[alt*="logo"],
  header .logo img {
    max-height: 48px;
  }


  /* Sections */

  .home section,
  .s-block {
    margin-top: 30px;
    margin-bottom: 30px;
  }


  /* Titles */

  .s-block__title {
    margin-bottom: 16px;
  }

  .s-block__title h2,
  .section-title h2,
  .home-block-title {
    font-size: 21px;
  }


  /* Hero */

  .s-block--hero-slider img,
  .s-block--slider img,
  .hero-slider img,
  salla-slider img {
    border-radius: 16px;
  }


  /* CATEGORY GRID:
     Two square cards per row on mobile
  */

  .s-block--categories .swiper-wrapper,
  .s-block--categories-with-images .swiper-wrapper {
    align-items: stretch;
  }

  .s-block--categories .swiper-slide,
  .s-block--categories-with-images .swiper-slide {
    width: calc(50% - 7px) !important;
  }

  .s-block--categories img,
  .s-block--categories-with-images img,
  .category-card img,
  .category-entry img {
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
  }


  /* Category names */

  .s-block--categories h3,
  .s-block--categories .category-name,
  .s-block--categories-with-images h3,
  .category-card h3 {
    font-size: 14px !important;
    margin-top: 8px;
  }


  /* Products */

  .s-product-card-entry,
  .product-entry {
    border-radius: 14px !important;
  }

  .s-product-card-content-title {
    font-size: 13.5px;
  }


  /* Banner */

  .s-block--banners img,
  .banner-entry img,
  .home-banner img {
    border-radius: 16px !important;
  }


  /* Hide oversized slider arrows */

  .swiper-button-next,
  .swiper-button-prev {
    width: 34px !important;
    height: 34px !important;
  }


  /* Newsletter */

  .newsletter,
  .s-block--newsletter {
    padding: 26px 18px;
    border-radius: 16px;
  }

}


/* =========================
   24. TABLET
   ========================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .container,
  .s-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .s-block__title h2 {
    font-size: 25px;
  }

}


/* =========================
   25. DESKTOP CATEGORY CARDS
   ========================= */

@media (min-width: 1025px) {

  .s-block--categories .swiper-slide,
  .s-block--categories-with-images .swiper-slide {
    border-radius: 20px;
  }

}


/* =========================
   26. DESKTOP WIDE LAYOUT
   ========================= */

@media (min-width: 1280px) {

  .home section,
  .s-block {
    margin-top: 58px;
    margin-bottom: 58px;
  }

  .s-block__title h2 {
    font-size: 30px;
  }

}


/* =========================
   27. GENERAL IMAGE QUALITY
   ========================= */

img {
  image-rendering: auto;
}

.s-product-card-image img,
.category-card img,
.banner-entry img {
  backface-visibility: hidden;
}


/* =========================
   28. REMOVE HARSH THEME LOOK
   ========================= */

.shadow,
.shadow-md,
.shadow-lg {
  box-shadow: var(--classy-shadow);
}

.rounded {
  border-radius: var(--classy-radius-small);
}

.rounded-lg,
.rounded-xl {
  border-radius: var(--classy-radius);
}


/* =========================
   29. FORM ELEMENTS
   ========================= */

input,
select,
textarea {
  border-color: var(--classy-border);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--classy-primary) !important;
  outline: none;
}


/* =========================
   30. LINKS / ACTIVE COLORS
   ========================= */

.text-primary,
a.text-primary {
  color: var(--classy-primary) !important;
}

.bg-primary {
  background-color: var(--classy-primary) !important;
}

.border-primary {
  border-color: var(--classy-primary) !important;
}


/* =========================================================
   END — CLASSY GALLERY V3
   ========================================================= */