/* ============================================================
   VENVITY — Decorative Product Visuals (CSS-only illustrations)
   ============================================================ */

/* Base visual container */
.product-visual {
  width: 100%;
  height: 100%;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Annual System ---- */
.visual-annual {
  background: linear-gradient(145deg, #e8e2d8 0%, #d4cdc3 100%);
}

.visual-annual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 22px,
      rgba(111,143,134,.15) 22px,
      rgba(111,143,134,.15) 23px
    );
}

.visual-annual .v-icon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.visual-annual .v-book {
  width: 64px;
  height: 84px;
  background: var(--bg-white);
  border-radius: 3px 8px 8px 3px;
  border-left: 6px solid var(--primary);
  box-shadow: 4px 4px 16px rgba(47,52,55,.12);
  position: relative;
}

.visual-annual .v-book::after {
  content: '';
  position: absolute;
  top: 14px; left: 12px; right: 12px;
  height: 2px;
  background: var(--border);
  box-shadow:
    0 8px 0 var(--border),
    0 16px 0 var(--border),
    0 24px 0 var(--border),
    0 32px 0 var(--border),
    0 40px 0 rgba(111,143,134,.5);
}

.visual-annual .v-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Reset Kit ---- */
.visual-reset {
  background: linear-gradient(145deg, #ece6dd 0%, #e0d8ce 100%);
}

.visual-reset::before {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(111,143,134,.25);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.visual-reset::after {
  content: '';
  position: absolute;
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 1px solid rgba(111,143,134,.35);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.visual-reset .v-icon {
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-reset .v-icon::after {
  content: '↺';
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
}

/* ---- Focus Modules ---- */
.visual-focus {
  background: linear-gradient(145deg, #e4e8e6 0%, #d5dbd8 100%);
}

.visual-focus .v-modules {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-template-rows: repeat(2, 40px);
  gap: 5px;
  position: relative;
  z-index: 1;
}

.visual-focus .v-module {
  border-radius: 4px;
  opacity: 0.85;
}

.visual-focus .v-module:nth-child(1) { background: var(--primary); }
.visual-focus .v-module:nth-child(2) { background: var(--secondary); }
.visual-focus .v-module:nth-child(3) { background: var(--accent); }
.visual-focus .v-module:nth-child(4) { background: var(--bg-neutral); border: 1.5px solid var(--border); }
.visual-focus .v-module:nth-child(5) { background: var(--primary); opacity: 0.5; }
.visual-focus .v-module:nth-child(6) { background: var(--secondary); opacity: 0.5; }

/* ---- Quarterly Reset ---- */
.visual-quarterly {
  background: linear-gradient(145deg, #e8e2d8 0%, #ddd6c9 100%);
}

.visual-quarterly .v-quarters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 80px; height: 80px;
  position: relative;
  z-index: 1;
}

.visual-quarterly .v-quarter {
  border-radius: 4px;
}

.visual-quarterly .v-quarter:nth-child(1) { background: var(--primary); }
.visual-quarterly .v-quarter:nth-child(2) { background: rgba(111,143,134,.4); }
.visual-quarterly .v-quarter:nth-child(3) { background: rgba(111,143,134,.25); }
.visual-quarterly .v-quarter:nth-child(4) { background: rgba(111,143,134,.1); border: 1.5px dashed rgba(111,143,134,.4); }

/* ---- Seasonal Reset ---- */
.visual-seasonal {
  background: linear-gradient(145deg, #f0e8dc 0%, #e6dcce 100%);
}

.visual-seasonal .v-seasons {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.visual-seasonal .v-season {
  width: 16px;
  border-radius: 3px 3px 0 0;
}

.visual-seasonal .v-season:nth-child(1) { height: 55px; background: #8fa98f; }
.visual-seasonal .v-season:nth-child(2) { height: 72px; background: var(--accent); }
.visual-seasonal .v-season:nth-child(3) { height: 60px; background: var(--primary); }
.visual-seasonal .v-season:nth-child(4) { height: 44px; background: #b5a08a; }

/* ---- Large hero visuals (product pages) ---- */
.visual-hero {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.visual-hero.visual-annual { min-height: 380px; }

/* ---- Card variant ---- */
.card-visual {
  width: 100%;
  height: 220px;
}