/* ==========================================================
   VORO STATIC HERO — SINGLE IMAGE / BRIGHT / PREMIUM
   ========================================================== */

#voro-hero-static {
  --vhs-cream: #fbf8f2;
  --vhs-cream-2: #f5efe5;
  --vhs-gold: #bc8445;
  --vhs-green: #0f4448;

  position: relative;
  width: 100%;
  overflow: hidden;
  padding:
    clamp(18px, 2vw, 28px)
    clamp(14px, 2.6vw, 42px)
    clamp(30px, 3vw, 46px);

  background:
    radial-gradient(circle at 8% 18%, rgba(223, 197, 160, .18), transparent 25%),
    radial-gradient(circle at 92% 80%, rgba(15, 68, 72, .045), transparent 24%),
    linear-gradient(180deg, #fffdfa 0%, var(--vhs-cream) 100%);
}

#voro-hero-static *,
#voro-hero-static *::before,
#voro-hero-static *::after {
  box-sizing: border-box;
}

#voro-hero-static .vhs-shell {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}

#voro-hero-static .vhs-shell::before,
#voro-hero-static .vhs-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

#voro-hero-static .vhs-shell::before {
  top: 50%;
  right: -22px;
  width: 44px;
  height: 54%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(188,132,69,0),
    rgba(188,132,69,.18),
    rgba(188,132,69,0)
  );
  filter: blur(1px);
}

#voro-hero-static .vhs-shell::after {
  top: 50%;
  left: -22px;
  width: 44px;
  height: 54%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(15,68,72,0),
    rgba(15,68,72,.08),
    rgba(15,68,72,0)
  );
  filter: blur(1px);
}

#voro-hero-static .vhs-banner {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: clamp(8px, .8vw, 12px);

  border: 1px solid rgba(188,132,69,.18);
  border-radius: clamp(18px, 1.7vw, 28px);

  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,244,237,.82));

  box-shadow:
    0 26px 70px rgba(57, 46, 33, .095),
    0 6px 18px rgba(57, 46, 33, .045),
    inset 0 1px 0 rgba(255,255,255,.86);

  text-decoration: none !important;

  transition:
    transform .32s cubic-bezier(.22,.61,.36,1),
    box-shadow .32s ease,
    border-color .32s ease;
}

#voro-hero-static .vhs-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42);
}

#voro-hero-static .vhs-banner:hover {
  transform: translateY(-3px);
  border-color: rgba(188,132,69,.30);
  box-shadow:
    0 32px 82px rgba(57, 46, 33, .12),
    0 8px 22px rgba(57, 46, 33, .055),
    inset 0 1px 0 rgba(255,255,255,.9);
}

#voro-hero-static .vhs-banner img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: clamp(12px, 1.25vw, 20px);

  /*
   * الصورة نفسها هي التصميم؛
   * نفتحها شوية من غير ما نغير درجاتها بشكل مبالغ.
   */
  filter:
    brightness(1.10)
    saturate(1.08)
    contrast(.97);

  transform: translateZ(0);
  transition:
    filter .35s ease,
    transform .7s cubic-bezier(.22,.61,.36,1);
}

#voro-hero-static .vhs-banner:hover img {
  filter:
    brightness(1.12)
    saturate(1.10)
    contrast(.97);
  transform: scale(1.004);
}

/* Tablet */
@media (max-width: 1100px) {
  #voro-hero-static {
    padding:
      16px 16px
      32px;
  }

  #voro-hero-static .vhs-shell {
    max-width: 100%;
  }

  #voro-hero-static .vhs-banner {
    padding: 8px;
    border-radius: 22px;
  }

  #voro-hero-static .vhs-banner img {
    border-radius: 15px;
  }

  #voro-hero-static .vhs-shell::before,
  #voro-hero-static .vhs-shell::after {
    width: 30px;
    height: 48%;
  }

  #voro-hero-static .vhs-shell::before {
    right: -14px;
  }

  #voro-hero-static .vhs-shell::after {
    left: -14px;
  }
}

/* Mobile */
@media (max-width: 700px) {
  #voro-hero-static {
    padding:
      10px 10px
      24px;

    background:
      radial-gradient(circle at 12% 18%, rgba(223,197,160,.13), transparent 28%),
      linear-gradient(180deg, #fffdfa 0%, #faf7f1 100%);
  }

  #voro-hero-static .vhs-banner {
    padding: 6px;
    border-radius: 16px;

    box-shadow:
      0 16px 38px rgba(57,46,33,.075),
      0 4px 12px rgba(57,46,33,.035);
  }

  #voro-hero-static .vhs-banner img {
    border-radius: 11px;
    filter:
      brightness(1.09)
      saturate(1.07)
      contrast(.98);
  }

  #voro-hero-static .vhs-banner:hover {
    transform: none;
  }

  #voro-hero-static .vhs-banner:hover img {
    transform: none;
  }

  #voro-hero-static .vhs-shell::before,
  #voro-hero-static .vhs-shell::after {
    display: none;
  }
}

@media (max-width: 390px) {
  #voro-hero-static {
    padding:
      8px 8px
      20px;
  }

  #voro-hero-static .vhs-banner {
    padding: 5px;
    border-radius: 14px;
  }

  #voro-hero-static .vhs-banner img {
    border-radius: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #voro-hero-static .vhs-banner,
  #voro-hero-static .vhs-banner img {
    transition: none !important;
  }
}

/* ==========================================================
   VORO PREMIUM SERVICE SECTION
   Desktop + Tablet + Mobile
   ========================================================== */

#voro-service-premium {
  --vsp-green: #0f4448;
  --vsp-green-dark: #082f32;

  --vsp-gold: #bc8445;
  --vsp-gold-light: #d9b27d;

  --vsp-cream: #f8f4ec;
  --vsp-white: #ffffff;

  --vsp-text: #103f43;
  --vsp-muted: #77716a;

  position: relative;

  width: 100%;

  padding:
    clamp(76px, 7vw, 116px)
    clamp(20px, 3vw, 48px);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 14%,
      rgba(188,132,69,.15),
      transparent 22%
    ),
    radial-gradient(
      circle at 89% 72%,
      rgba(15,68,72,.08),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #fbfaf6 0%,
      #f5f0e8 52%,
      #fbfaf7 100%
    );
}


/* RESET INSIDE SECTION */

#voro-service-premium *,
#voro-service-premium *::before,
#voro-service-premium *::after {
  box-sizing: border-box;
}


/* ==========================================================
   SHELL
   ========================================================== */

#voro-service-premium .vsp-shell {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1420px;

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(390px, .86fr)
    minmax(570px, 1.14fr);

  grid-template-areas:
    "copy visual"
    "benefits visual"
    "actions visual";

  column-gap:
    clamp(50px, 6vw, 96px);

  row-gap: 28px;

  align-items: center;
}


/* ==========================================================
   COPY
   ========================================================== */

#voro-service-premium .vsp-copy {
  grid-area: copy;

  align-self: end;
}


#voro-service-premium .vsp-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 16px;

  color: var(--vsp-gold);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 2.4px;
}


#voro-service-premium .vsp-kicker-line {
  width: 39px;
  height: 1px;

  display: block;

  background: var(--vsp-gold);
}


#voro-service-premium .vsp-title {
  margin: 0;

  color: var(--vsp-text);

  font-size:
    clamp(42px, 4.6vw, 70px);

  font-weight: 600;

  line-height: 1.12;

  letter-spacing: -.045em;

  text-wrap: balance;
}


#voro-service-premium .vsp-title em {
  display: block;

  margin-top: 4px;

  color: var(--vsp-gold);

  font-style: normal;
  font-weight: 500;
}


#voro-service-premium .vsp-intro {
  max-width: 570px;

  margin:
    23px 0 0;

  color: var(--vsp-muted);

  font-size: 15px;

  line-height: 2;
}


/* ==========================================================
   VISUAL AREA
   ========================================================== */

#voro-service-premium .vsp-visual {
  grid-area: visual;

  position: relative;

  width: 100%;

  min-height: 700px;

  perspective: 1200px;
}


/* BACKGROUND GLOWS */

#voro-service-premium .vsp-glow {
  position: absolute;

  pointer-events: none;

  border-radius: 50%;

  filter: blur(15px);
}


#voro-service-premium .vsp-glow--gold {
  width: 320px;
  height: 320px;

  top: 8%;
  right: 8%;

  background:
    radial-gradient(
      circle,
      rgba(188,132,69,.20),
      rgba(188,132,69,0) 70%
    );
}


#voro-service-premium .vsp-glow--green {
  width: 280px;
  height: 280px;

  bottom: 5%;
  left: 6%;

  background:
    radial-gradient(
      circle,
      rgba(15,68,72,.14),
      rgba(15,68,72,0) 70%
    );
}


/* ORBITS */

#voro-service-premium .vsp-orbit {
  position: absolute;

  z-index: 0;

  border-radius: 50%;

  pointer-events: none;
}


#voro-service-premium .vsp-orbit--one {
  width: 450px;
  height: 450px;

  right: -20px;
  top: 8%;

  border:
    1px solid rgba(188,132,69,.15);
}


#voro-service-premium .vsp-orbit--two {
  width: 310px;
  height: 310px;

  left: 0;
  bottom: 6%;

  border:
    1px solid rgba(15,68,72,.09);
}


/* ==========================================================
   IMAGE CARDS
   ========================================================== */

#voro-service-premium .vsp-photo {
  position: absolute;

  margin: 0;

  overflow: hidden;

  border-radius: 24px;

  background: #e7e0d5;

  box-shadow:
    0 30px 70px
    rgba(19,42,40,.14),
    0 5px 15px
    rgba(19,42,40,.05);

  will-change: transform;

  transition:
    transform
    .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .4s ease;
}


#voro-service-premium
.vsp-photo:hover {
  box-shadow:
    0 38px 85px
    rgba(19,42,40,.18);
}


#voro-service-premium
.vsp-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    1s cubic-bezier(.22,.61,.36,1);
}


#voro-service-premium
.vsp-photo:hover img {
  transform: scale(1.035);
}


/* MODEL */

#voro-service-premium
.vsp-photo--main {
  z-index: 2;

  width: 57%;
  height: 79%;

  top: 6%;
  right: 4%;
}


#voro-service-premium
.vsp-photo--main img {
  object-position: center top;
}


/* WATCH */

#voro-service-premium
.vsp-photo--watch {
  z-index: 4;

  width: 38%;
  height: 34%;

  top: 0;
  left: 1%;

  transform:
    rotate(-2.7deg);
}


/* JEWELLERY */

#voro-service-premium
.vsp-photo--jewellery {
  z-index: 4;

  width: 44%;
  height: 40%;

  left: 0;
  bottom: 2%;

  transform:
    rotate(2deg);
}


/* MODEL OVERLAY */

#voro-service-premium
.vsp-main-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(4,30,32,.54) 100%
    );

  pointer-events: none;
}


#voro-service-premium
.vsp-main-caption {
  position: absolute;

  z-index: 3;

  right: 23px;
  bottom: 22px;

  color: white;
}


#voro-service-premium
.vsp-main-caption span {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(255,255,255,.64);

  font-size: 8px;

  letter-spacing: 2.1px;
}


#voro-service-premium
.vsp-main-caption strong {
  font-size: 17px;
  font-weight: 500;
}


/* ==========================================================
   FLOATING CARDS
   ========================================================== */

#voro-service-premium
.vsp-floating {
  position: absolute;

  z-index: 8;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 13px 15px;

  border:
    1px solid
    rgba(255,255,255,.75);

  border-radius: 16px;

  background:
    rgba(255,255,255,.72);

  -webkit-backdrop-filter:
    blur(22px);

  backdrop-filter:
    blur(22px);

  box-shadow:
    0 17px 40px
    rgba(16,53,52,.10);
}


#voro-service-premium
.vsp-floating--secure {
  top: 13%;
  right: -1%;

  animation:
    vspFloating
    5.4s ease-in-out infinite;
}


#voro-service-premium
.vsp-floating--tabby {
  right: 28%;
  bottom: 4%;

  animation:
    vspFloating
    6.1s ease-in-out
    -.9s infinite;
}


#voro-service-premium
.vsp-floating-icon {
  display: grid;

  place-items: center;

  width: 38px;
  min-width: 38px;
  height: 38px;

  color: var(--vsp-gold);

  border:
    1px solid
    rgba(188,132,69,.28);

  border-radius: 50%;

  background:
    rgba(255,255,255,.55);
}


#voro-service-premium
.vsp-floating-icon svg {
  width: 18px !important;
  height: 18px !important;

  max-width: 18px !important;
  max-height: 18px !important;

  fill: none !important;
}


#voro-service-premium
.vsp-floating-copy strong {
  display: block;

  margin-bottom: 2px;

  color: var(--vsp-text);

  font-size: 12px;
  font-weight: 700;
}


#voro-service-premium
.vsp-floating-copy small {
  display: block;

  color: #817a72;

  font-size: 9px;
}


#voro-service-premium
.vsp-tabby-logo {
  display: grid;

  place-items: center;

  min-width: 52px;
  height: 35px;

  padding-inline: 8px;

  border-radius: 9px;

  background: #66ebc1;

  color: #073539;

  font-size: 11px;
  font-weight: 800;

  line-height: 1;
}


/* ==========================================================
   BENEFITS
   ========================================================== */

#voro-service-premium
.vsp-benefits {
  grid-area: benefits;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 11px;

  align-self: start;
}


#voro-service-premium
.vsp-benefit {
  position: relative;

  min-height: 124px;

  padding: 17px;

  overflow: hidden;

  border:
    1px solid
    rgba(15,68,72,.10);

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.88),
      rgba(255,255,255,.57)
    );

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 10px 35px
    rgba(13,46,45,.035);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}


#voro-service-premium
.vsp-benefit::after {
  content: "";

  position: absolute;

  width: 84px;
  height: 84px;

  left: -48px;
  bottom: -48px;

  border-radius: 50%;

  background:
    rgba(188,132,69,.08);

  transition:
    transform .35s ease;
}


#voro-service-premium
.vsp-benefit:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(188,132,69,.25);

  box-shadow:
    0 17px 42px
    rgba(13,46,45,.065);
}


#voro-service-premium
.vsp-benefit:hover::after {
  transform:
    scale(2);
}


#voro-service-premium
.vsp-benefit-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 15px;
}


#voro-service-premium
.vsp-benefit-number {
  color:
    rgba(188,132,69,.72);

  font-size: 8px;

  letter-spacing: 1px;
}


#voro-service-premium
.vsp-benefit-icon {
  position: relative;
  z-index: 2;

  display: grid;

  place-items: center;

  width: 40px;
  height: 40px;

  color: var(--vsp-green);

  border:
    1px solid
    rgba(188,132,69,.27);

  border-radius: 50%;

  background:
    rgba(255,255,255,.70);

  font-size: 9px;
  font-weight: 800;
}


#voro-service-premium
.vsp-benefit-icon svg {
  width: 18px !important;
  height: 18px !important;

  max-width: 18px !important;
  max-height: 18px !important;

  fill: none !important;
}


#voro-service-premium
.vsp-benefit-icon--tabby {
  background:
    rgba(102,235,193,.22);

  border-color:
    rgba(58,214,166,.38);
}


#voro-service-premium
.vsp-benefit h3 {
  position: relative;
  z-index: 2;

  margin:
    0 0 5px;

  color: var(--vsp-text);

  font-size: 14px;
  font-weight: 650;
}


#voro-service-premium
.vsp-benefit p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: #79736d;

  font-size: 10.5px;

  line-height: 1.7;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

#voro-service-premium
.vsp-actions {
  grid-area: actions;

  display: flex;

  align-items: center;

  gap: 22px;

  align-self: start;
}



#voro-service-premium
.vsp-confidence {
  display: flex;

  align-items: center;

  gap: 9px;

  color: #888079;

  font-size: 10px;
}


#voro-service-premium
.vsp-confidence-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--vsp-gold);

  box-shadow:
    0 0 0 5px
    rgba(188,132,69,.10);
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes vspFloating {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

  #voro-service-premium
  .vsp-shell {

    grid-template-columns: 1fr;

    grid-template-areas:
      "copy"
      "visual"
      "benefits"
      "actions";

    max-width: 820px;

    row-gap: 30px;
  }


  #voro-service-premium
  .vsp-copy {
    text-align: center;
  }


  #voro-service-premium
  .vsp-kicker {
    justify-content: center;
  }


  #voro-service-premium
  .vsp-intro {
    margin-inline: auto;
  }


  #voro-service-premium
  .vsp-visual {
    width: 100%;

    min-height: 670px;

    margin-inline: auto;
  }


  #voro-service-premium
  .vsp-actions {
    justify-content: center;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

  #voro-service-premium {

    padding:
      48px 14px
      56px;

    background:
      radial-gradient(
        circle at 10% 7%,
        rgba(188,132,69,.13),
        transparent 23%
      ),
      radial-gradient(
        circle at 90% 43%,
        rgba(15,68,72,.08),
        transparent 23%
      ),
      linear-gradient(
        180deg,
        #fbf9f4 0%,
        #f5f1e9 100%
      );
  }


  #voro-service-premium
  .vsp-shell {

    grid-template-columns: 1fr;

    grid-template-areas:
      "copy"
      "visual"
      "benefits"
      "actions";

    row-gap: 0;
  }


  /* COPY */

  #voro-service-premium
  .vsp-copy {
    text-align: right;
  }


  #voro-service-premium
  .vsp-kicker {
    justify-content:
      flex-start;

    margin-bottom: 12px;

    font-size: 8px;

    letter-spacing:
      1.8px;
  }


  #voro-service-premium
  .vsp-kicker-line {
    width: 28px;
  }


  #voro-service-premium
  .vsp-title {

    font-size:
      clamp(36px, 11vw, 50px);

    line-height: 1.12;

    letter-spacing:
      -.045em;
  }


  #voro-service-premium
  .vsp-intro {

    max-width: 96%;

    margin-top: 17px;

    font-size: 13px;

    line-height: 1.85;
  }


  /* =========================
     MOBILE VISUAL
     ========================= */

  #voro-service-premium
  .vsp-visual {

    min-height: 435px;

    margin:
      30px 0 32px;
  }


  #voro-service-premium
  .vsp-photo {

    border-radius: 16px;

    box-shadow:
      0 18px 42px
      rgba(19,42,40,.12);
  }


  #voro-service-premium
  .vsp-photo--main {

    width: 66%;
    height: 75%;

    right: 4%;
    top: 6%;
  }


  #voro-service-premium
  .vsp-photo--watch {

    width: 42%;
    height: 29%;

    left: 0;
    top: 0;

    transform:
      rotate(-2deg);
  }


  #voro-service-premium
  .vsp-photo--jewellery {

    width: 48%;
    height: 31%;

    left: 0;
    bottom: 0;

    transform:
      rotate(1.5deg);
  }


  #voro-service-premium
  .vsp-main-caption {

    right: 13px;
    bottom: 13px;
  }


  #voro-service-premium
  .vsp-main-caption span {

    margin-bottom: 2px;

    font-size: 6px;

    letter-spacing:
      1.5px;
  }


  #voro-service-premium
  .vsp-main-caption strong {

    font-size: 12px;
  }


  /* MOBILE FLOATING */

  #voro-service-premium
  .vsp-floating {

    gap: 7px;

    padding:
      9px 10px;

    border-radius: 12px;

    background:
      rgba(255,255,255,.76);

    -webkit-backdrop-filter:
      blur(17px);

    backdrop-filter:
      blur(17px);

    box-shadow:
      0 11px 26px
      rgba(14,43,42,.09);
  }


  #voro-service-premium
  .vsp-floating--secure {

    top: 13%;
    right: -1%;
  }


  #voro-service-premium
  .vsp-floating--tabby {

    right: 8%;
    bottom: 3%;
  }


  #voro-service-premium
  .vsp-floating-icon {

    width: 30px;
    min-width: 30px;
    height: 30px;
  }


  #voro-service-premium
  .vsp-floating-icon svg {

    width: 13px !important;
    height: 13px !important;
  }


  #voro-service-premium
  .vsp-floating-copy strong {

    font-size: 9px;
  }


  #voro-service-premium
  .vsp-floating-copy small {

    font-size: 7px;
  }


  #voro-service-premium
  .vsp-tabby-logo {

    min-width: 40px;
    height: 29px;

    border-radius: 7px;

    font-size: 8px;
  }


  #voro-service-premium
  .vsp-orbit--one {

    width: 300px;
    height: 300px;

    right: -85px;
  }


  #voro-service-premium
  .vsp-orbit--two {

    width: 190px;
    height: 190px;

    left: -55px;
  }


  /* =========================
     BENEFITS 2 × 2
     ========================= */

  #voro-service-premium
  .vsp-benefits {

    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap: 9px;
  }


  #voro-service-premium
  .vsp-benefit {

    min-height: 139px;

    padding:
      13px 12px;

    border-radius: 14px;
  }


  #voro-service-premium
  .vsp-benefit-top {

    margin-bottom: 12px;
  }


  #voro-service-premium
  .vsp-benefit-icon {

    width: 35px;
    height: 35px;

    font-size: 7px;
  }


  #voro-service-premium
  .vsp-benefit-icon svg {

    width: 15px !important;
    height: 15px !important;
  }


  #voro-service-premium
  .vsp-benefit-number {

    font-size: 7px;
  }


  #voro-service-premium
  .vsp-benefit h3 {

    font-size: 12px;

    line-height: 1.45;
  }


  #voro-service-premium
  .vsp-benefit p {

    display: -webkit-box;

    overflow: hidden;

    font-size: 9px;

    line-height: 1.6;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }


  /* CTA */

  #voro-service-premium
  .vsp-actions {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-top: 18px;
  }


  #voro-service-premium
  .vsp-button {

    width: 100%;

    height: 50px;

    min-width: 0;
  }


  #voro-service-premium
  .vsp-confidence {

    justify-content: center;

    font-size: 9px;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

  #voro-service-premium
  .vsp-visual {

    min-height: 390px;
  }


  #voro-service-premium
  .vsp-benefit {

    min-height: 132px;

    padding:
      12px 10px;
  }


  #voro-service-premium
  .vsp-benefit h3 {

    font-size: 11px;
  }


  #voro-service-premium
  .vsp-benefit p {

    font-size: 8.5px;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media
(prefers-reduced-motion: reduce) {

  #voro-service-premium *,
  #voro-service-premium *::before,
  #voro-service-premium *::after {

    animation:
      none !important;

    transition:
      none !important;
  }

}
/* =========================================================
   VORO - SHOP BY OCCASION
   ========================================================= */

#voro-occasion-premium {
  --vop-green: #0f4448;
  --vop-green-dark: #082f32;
  --vop-gold: #bc8445;
  --vop-gold-soft: #d9b27d;
  --vop-cream: #f8f5ef;
  --vop-text: #113f43;
  --vop-muted: #7b756f;

  position: relative;
  width: 100%;
  overflow: hidden;

  padding:
    clamp(72px, 7vw, 110px)
    clamp(18px, 3vw, 44px);

  background:
    radial-gradient(circle at 88% 10%, rgba(188,132,69,.10), transparent 23%),
    radial-gradient(circle at 5% 80%, rgba(15,68,72,.07), transparent 22%),
    linear-gradient(180deg, #fcfaf6 0%, #f7f2ea 100%);
}

#voro-occasion-premium *,
#voro-occasion-premium *::before,
#voro-occasion-premium *::after {
  box-sizing: border-box;
}

#voro-occasion-premium .vop-shell {
  width: 100%;
  max-width: 1420px;
  margin-inline: auto;
}

/* ========================
   HEAD
   ======================== */

#voro-occasion-premium .vop-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 34px;
}

#voro-occasion-premium .vop-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--vop-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
}

#voro-occasion-premium .vop-kicker-line {
  width: 42px;
  height: 1px;
  background: var(--vop-gold);
  display: block;
}

#voro-occasion-premium .vop-title {
  margin: 0;
  color: var(--vop-text);
  font-size: clamp(38px, 4.8vw, 74px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.045em;
}

#voro-occasion-premium .vop-title em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-weight: 500;
  color: var(--vop-gold);
}

#voro-occasion-premium .vop-intro {
  max-width: 720px;
  margin: 18px auto 0;
  color: var(--vop-muted);
  font-size: 15px;
  line-height: 1.95;
}

/* ========================
   GRID
   ======================== */

#voro-occasion-premium .vop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-rows: repeat(2, 345px);
  gap: 18px;
  align-items: stretch;
}

#voro-occasion-premium .vop-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 28px;
  text-decoration: none !important;
  background: #ddd;
  isolation: isolate;
  box-shadow:
    0 24px 65px rgba(18, 45, 43, .10),
    0 6px 18px rgba(18, 45, 43, .05);
  transform: translateY(0);
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .4s ease;
}

#voro-occasion-premium .vop-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 34px 82px rgba(18, 45, 43, .14),
    0 8px 22px rgba(18, 45, 43, .07);
}

#voro-occasion-premium .vop-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}

#voro-occasion-premium .vop-card:hover img {
  transform: scale(1.045);
}

#voro-occasion-premium .vop-card--hero {
  grid-row: 1 / 3;
  min-height: 708px;
}

#voro-occasion-premium .vop-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4,25,27,.02) 20%, rgba(7,30,31,.76) 100%);
  transition: background .4s ease;
}

#voro-occasion-premium .vop-card:hover .vop-overlay {
  background:
    linear-gradient(180deg, rgba(4,25,27,.04) 15%, rgba(7,30,31,.84) 100%);
}

/* ========================
   CARD COPY
   ======================== */

#voro-occasion-premium .vop-content {
  position: absolute;
  z-index: 2;
  right: 28px;
  left: 28px;
  bottom: 28px;
  color: #fff;
}

#voro-occasion-premium .vop-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.65);
  font-size: 8px;
  letter-spacing: 2.1px;
}

#voro-occasion-premium .vop-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

#voro-occasion-premium .vop-card--hero h3 {
  font-size: 34px;
}

#voro-occasion-premium .vop-card p {
  margin: 0;
  max-width: 420px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.75;
}

#voro-occasion-premium .vop-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}

#voro-occasion-premium .vop-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

#voro-occasion-premium .vop-card:hover .vop-link {
  transform: translateY(-2px);
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.68);
}

/* ========================
   TABLET
   ======================== */

@media (max-width: 1100px) {
  #voro-occasion-premium .vop-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  #voro-occasion-premium .vop-card--hero {
    min-height: 620px;
    grid-row: auto;
  }

  #voro-occasion-premium .vop-card--daily,
  #voro-occasion-premium .vop-card--gift {
    min-height: 360px;
  }

  #voro-occasion-premium .vop-head {
    max-width: 760px;
    margin-bottom: 28px;
  }
}

/* ========================
   MOBILE
   ======================== */

@media (max-width: 700px) {
  #voro-occasion-premium {
    padding: 52px 14px 60px;
  }

  #voro-occasion-premium .vop-head {
    margin-bottom: 22px;
  }

  #voro-occasion-premium .vop-kicker {
    margin-bottom: 12px;
    font-size: 8px;
    letter-spacing: 1.9px;
  }

  #voro-occasion-premium .vop-kicker-line {
    width: 28px;
  }

  #voro-occasion-premium .vop-title {
    font-size: clamp(34px, 10.5vw, 50px);
    line-height: 1.12;
  }

  #voro-occasion-premium .vop-intro {
    font-size: 13px;
    line-height: 1.9;
    margin-top: 14px;
  }

  #voro-occasion-premium .vop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #voro-occasion-premium .vop-card,
  #voro-occasion-premium .vop-card--hero,
  #voro-occasion-premium .vop-card--daily,
  #voro-occasion-premium .vop-card--gift {
    min-height: 430px;
    border-radius: 20px;
  }

  #voro-occasion-premium .vop-content {
    right: 18px;
    left: 18px;
    bottom: 18px;
  }

  #voro-occasion-premium .vop-card--hero h3,
  #voro-occasion-premium .vop-card h3 {
    font-size: 24px;
  }

  #voro-occasion-premium .vop-card p {
    font-size: 11px;
    line-height: 1.7;
  }

  #voro-occasion-premium .vop-link {
    padding: 10px 16px;
    font-size: 11px;
    margin-top: 14px;
  }

  #voro-occasion-premium .vop-link svg {
    width: 14px;
    height: 14px;
  }
}

/* ========================
   SMALL MOBILE
   ======================== */

@media (max-width: 390px) {
  #voro-occasion-premium .vop-card,
  #voro-occasion-premium .vop-card--hero,
  #voro-occasion-premium .vop-card--daily,
  #voro-occasion-premium .vop-card--gift {
    min-height: 390px;
  }

  #voro-occasion-premium .vop-card h3,
  #voro-occasion-premium .vop-card--hero h3 {
    font-size: 21px;
  }

  #voro-occasion-premium .vop-card p {
    font-size: 10px;
  }
}

/* ========================
   REDUCED MOTION
   ======================== */

@media (prefers-reduced-motion: reduce) {
  #voro-occasion-premium *,
  #voro-occasion-premium *::before,
  #voro-occasion-premium *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   VORO HERO — REMOVE SALLA TOP GAP
   ========================================================= */

/* remove spacing added by Salla around the custom HTML block */
.s-block:has(#voro-hero-static),
.s-block--custom-html:has(#voro-hero-static),
.s-block--custom:has(#voro-hero-static),
section:has(> #voro-hero-static) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* Hero spacing itself */
#voro-hero-static {
  margin-top: 0 !important;

  padding-top: 8px !important;
}


/* Desktop */
@media (min-width: 1025px) {

  #voro-hero-static {
    padding-top: 8px !important;
  }

}


/* Tablet */
@media (min-width: 701px) and (max-width: 1024px) {

  #voro-hero-static {
    padding-top: 6px !important;
  }

}


/* Mobile */
@media (max-width: 700px) {

  #voro-hero-static {
    padding-top: 4px !important;
  }

}