/* Add custom CSS styles below */ 
/* VIOLA - BLUE ROYAL LUXURY */

:root {
  --color-primary: #153D68;
  --color-primary-dark: #102F50;
  --color-primary-light: #245587;
  --color-primary-reverse: #FFFFFF;

  --viola-blue: #153D68;
  --viola-blue-light: #DCE8F3;
  --viola-blue-soft: #EDF3F9;
  --viola-silver: #A9BCD1;
  --viola-white: #FFFFFF;
}

/* خلفية المتجر */
body#app {
  background-color: #EDF3F9 !important;
  color: #153D68 !important;
}

/* خلفية المحتوى */
#main-content {
  background-color: #EDF3F9 !important;
}

/* بطاقات المنتجات */
.s-product-card {
  background-color: #FFFFFF !important;
  border-color: #DCE8F3 !important;
}

/* لون النصوص */
body#app {
  color: #153D68;
}
/* VIOLA - Fast Elegant Image Zoom */

.s-product-card-image {
    overflow: hidden;
    border-radius: 12px;
}

.s-product-card-image img {
    transition: transform 0.2s ease-out;
    transform-origin: center center;
}

@media (hover: hover) and (pointer: fine) {
    .s-product-card-image:hover img {
        transform: scale(1.12);
    }
}
/* VIOLA - Luxury Product Cards */

.s-product-card {
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease;
}

.s-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(28, 42, 82, 0.10);
}

.s-product-card-image {
    border-radius: 12px;
    overflow: hidden;
}

.s-product-card-content {
    padding: 12px;
}
/* VIOLA - Elegant Image Shine */
.s-product-card-image {
    position: relative;
    overflow: hidden;
}

.s-product-card-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );
    transform: skewX(-20deg);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .s-product-card-image:hover::after {
        animation: violaShine 0.8s ease;
    }
}

@keyframes violaShine {
    from { left: -100%; }
    to { left: 150%; }
}
/* VIOLA - Soft Image Entrance */
.s-product-card-image img {
    animation: violaFadeIn 0.7s ease both;
}

@keyframes violaFadeIn {
    from {
        opacity: 0.75;
    }
    to {
        opacity: 1;
    }
}
/* VIOLA - Elegant Image Frame */
.s-product-card-image {
    border: 1px solid rgba(28, 42, 82, 0.08);
    border-radius: 14px;
    overflow: hidden;
}
/* VIOLA - Soft Image Shadow */
.s-product-card-image {
    box-shadow: 0 5px 18px rgba(28, 42, 82, 0.07);
}
/* VIOLA - Gentle Card Lift */
@media (hover: hover) and (pointer: fine) {
    .s-product-card {
        transition: transform 0.3s ease;
    }

    .s-product-card:hover {
        transform: translateY(-3px);
    }
}
/* VIOLA — Luxury Welcome Marquee */
.viola-welcome {
    overflow: hidden;
    white-space: nowrap;
    background: #1C2A52;
    color: #fff;
    padding: 12px 0;
}

.viola-welcome span {
    display: inline-block;
    padding-left: 100%;
    animation: viola-marquee 20s linear infinite;
    letter-spacing: 3px;
    font-size: 13px;
}

@keyframes viola-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* VIOLA — Wishlist Heart Pulse */
.viola-heart {
    animation: viola-heart-pulse 1.2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes viola-heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

/* VIOLA — Smooth Product Image Transition */
.s-product-card-image {
    overflow: hidden;
}

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

@media (hover: hover) and (pointer: fine) {
    .s-product-card-image:hover img {
        transform: scale(1.06);
    }
}

/* VIOLA — Luxury Packaging Section */
.viola-packaging {
    background: #f7f8fb;
    border: 1px solid #e5e9f2;
    border-radius: 14px;
    padding: 24px;
    margin: 24px 0;
    text-align: center;
    color: #1C2A52;
}

.viola-packaging h3 {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.viola-packaging p {
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}
/* VIOLA — Elegant Product Image Zoom */

.s-product-card-image {
    overflow: hidden;
    border-radius: 12px;
}

.s-product-card-image img {
    transition: transform 0.45s ease;
    transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
    .s-product-card-image:hover img {
        transform: scale(1.06);
    }
}
(function () {
  if (window.violaIntroInitialized) return;
  window.violaIntroInitialized = true;

  const STORAGE_KEY = "viola_intro_seen";
  if (sessionStorage.getItem(STORAGE_KEY)) return;

  const style = document.createElement("style");
  style.textContent = `
    #viola-intro {
      position: fixed;
      inset: 0;
      z-index: 999999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1C2A52;
      opacity: 1;
      transition: opacity .8s ease;
    }

    #viola-intro.viola-hide {
      opacity: 0;
      pointer-events: none;
    }

    .viola-frame {
      width: min(88vw, 430px);
      min-height: 65vh;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 35px 20px;
      box-sizing: border-box;
      animation: viola-frame-in 1s ease both;
    }

    .viola-gem {
      width: 112px;
      height: 112px;
      animation: viola-gem-in 1.2s ease both,
                 viola-gem-glow 3s ease-in-out 1.2s infinite;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
    }

    .viola-brand {
      margin-top: 28px;
      color: #fff;
      font-family: Georgia, serif;
      font-size: 32px;
      letter-spacing: 9px;
      font-weight: 400;
      opacity: 0;
      animation: viola-name-in 1s ease .7s forwards;
    }

    .viola-tagline {
      margin-top: 12px;
      color: #e4e9f5;
      font-size: 10px;
      letter-spacing: 3px;
      opacity: 0;
      animation: viola-name-in 1s ease 1s forwards;
    }

    @keyframes viola-frame-in {
      from { transform: scale(.96); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    @keyframes viola-gem-in {
      from { transform: translateY(15px) scale(.8); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

    @keyframes viola-gem-glow {
      0%, 100% { filter: drop-shadow(0 8px 18px rgba(0,0,0,.22)); }
      50% { filter: drop-shadow(0 8px 25px rgba(105,230,200,.35)); }
    }

    @keyframes viola-name-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
  `;
  document.head.appendChild(style);

  const intro = document.createElement("div");
  intro.id = "viola-intro";
  intro.innerHTML = `
    <div class="viola-frame">
      <svg class="viola-gem" viewBox="0 0 120 120" aria-label="Emerald">
        <defs>
          <linearGradient id="viola-emerald" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#b4ffe3"/>
            <stop offset="35%" stop-color="#28c99a"/>
            <stop offset="70%" stop-color="#087c61"/>
            <stop offset="100%" stop-color="#034c40"/>
          </linearGradient>
        </defs>
        <path d="M30 12 L90 12 L112 38 L100 91 L60 112 L20 91 L8 38 Z"
          fill="url(#viola-emerald)" stroke="#d8fff0" stroke-width="1.5"/>
        <path d="M30 12 L60 38 L90 12 M8 38 L60 38 L112 38
          M20 91 L60 38 L100 91 M20 91 L60 112 L100 91"
          fill="none" stroke="#d8fff0" stroke-opacity=".75" stroke-width="1.2"/>
        <path d="M30 12 L8 38 L60 38 Z" fill="#d7fff0" opacity=".35"/>
        <path d="M60 38 L90 12 L112 38 Z" fill="#fff" opacity=".18"/>
        <path d="M60 38 L20 91 L60 112 Z" fill="#004c3e" opacity=".2"/>
      </svg>
      <div class="viola-brand">VIOLA</div>
      <div class="viola-tagline">ELEGANCE IN EVERY DETAIL</div>
    </div>
  `;

  document.body.appendChild(intro);
  document.body.style.overflow = "hidden";

  setTimeout(function () {
    intro.classList.add("viola-hide");
    setTimeout(function () {
      intro.remove();
      document.body.style.overflow = "";
      sessionStorage.setItem(STORAGE_KEY, "1");
    }, 850);
  }, 3500);
})();