/*
 *  Custom CSS – Rosh Array
 *  By Rain | 27-01-2026
 *  PrestaShop 1.7 Classic Theme
 *  Includes hand-painted style dropdown + rose hover
 */

/* ================= BASE STYLES ================= */
.product-miniature .thumbnail-container {border-radius: 0px 25px;}
.product-flags li.product-flag {background: #814827;}
.btn-primary {
  color: #f4f4f4;
  background-color: #814827;
}
#header .header-top a[data-depth="0"] {
  color: #814827;
  text-transform: uppercase;
}
#header .top-menu a[data-depth="0"]:hover {
  color: #c29e7b;
  text-decoration: none;
}

body {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #232323;
}

#wrapper {
  padding-top: 1.563rem;
  background-image: url(../css/ra_bg_1.svg);
}

.footer-container {
  padding-top: 2.5rem;
  overflow: hidden;
  background-color: #aeac99;
}

.product-miniature .product-price-and-shipping {
  font-weight: 500;
  text-align: center;
  color: #232323;
}

/* ================= HEADER ================= */
#header .header-top {
  padding: 7px 0;
  position: relative;
}

/* Watercolor header background */
#header .header-nav,
#header .header-top {
  background:
    radial-gradient(120% 80% at 10% 20%, rgba(243,226,201,.55), transparent 60%),
    radial-gradient(120% 90% at 90% 30%, rgba(236,214,183,.45), transparent 65%),
    radial-gradient(100% 80% at 40% 90%, rgba(248,233,210,.50), transparent 70%),
    linear-gradient(180deg, #f6ead7 0%, #efe0c6 100%);
  border-bottom: 1px solid rgba(180,150,110,.25);
}

#header .header-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.20), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ================= DESKTOP MENU ================= */
#_desktop_top_menu {
  background: transparent;
}

#_desktop_top_menu ul.top-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.2rem;
  padding: 0.9rem 0;
  list-style: none;
  margin: 0;
}

#_desktop_top_menu li a {
  position: relative;
  padding: 0.6rem 0.3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a4a32;
  transition: color .3s ease;
  z-index: 1;
}

/* ================= ROSE HOVER EFFECT ================= */
#_desktop_top_menu li a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%) scale(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg opacity='0.6'%3E%3Cellipse cx='50' cy='50' rx='8' ry='12' fill='%23f4a5b8'/%3E%3Cellipse cx='50' cy='50' rx='9' ry='16' fill='%23fcc5d0' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='9' ry='16' fill='%23fdd5dc' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='9' ry='16' fill='%23fcc5d0' transform='rotate(135 50 50)'/%3E%3Ccircle cx='50' cy='50' r='6' fill='%23e8939f'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}

#_desktop_top_menu li:hover > a::before {
  transform: translate(-50%, -50%) scale(1.6) rotate(10deg);
  opacity: 1;
}

/* ================= UNDERLINE EFFECT ================= */
#_desktop_top_menu li a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c99aa3, transparent);
  transform: translateX(-50%);
  transition: width .35s ease;
}

#_desktop_top_menu li:hover > a::after {
  width: 100%;
}

#_desktop_top_menu li.current > a,
#_desktop_top_menu li > a[aria-current="page"] {
  color: #b54d5a;
}

#_desktop_top_menu li.current > a::after {
  width: 100%;
}

/* ================= HAND-PAINTED DROPDOWN ================= */
#_desktop_top_menu li.has-submenu {
  position: relative;
}

#_desktop_top_menu .sub-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: .6rem 0;
  border-radius: 12px;

  /* Canvas painting style */
  background:
    linear-gradient(135deg, rgba(246,234,215,0.95) 0%, rgba(239,224,198,0.95) 100%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 4px);
  box-shadow:
    0 4px 20px rgba(120,90,50,.2),
    0 0 0 2px rgba(246,234,215,.8),
    inset 0 0 15px rgba(255,255,255,0.2);

  backdrop-filter: blur(2px);
  transform: translateY(12px) rotate(-1deg) skewX(-0.5deg);
  transition: all .35s cubic-bezier(.22,1,.36,1);
  z-index: 99;
}

#_desktop_top_menu li.has-submenu:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(0deg) skewX(0deg);
}

#_desktop_top_menu .sub-menu li a {
  padding: .5rem 1.6rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: #5a4a32;
  transition: all .25s ease;
}

#_desktop_top_menu .sub-menu li a:hover {
  background: rgba(243,226,201,.45);
  color: #9c5f6c;
  padding-left: 2rem;
}

/* ================= MOBILE ================= */
@media (max-width: 991px) {
  #_desktop_top_menu {
    display: none;
  }

  #header .header-nav,
  #header .header-top {
    background: linear-gradient(180deg, #f6ead7 0%, #efe0c6 100%);
  }
}